I have been an avid user for about a year now, and while I love it, it’s not quite perfect. I wanted to take a minute to highlight a couple things that is great at, and a few places it could stand to improve.

This will go from two perspectives, both as a user and a writer.

I’m going to touch on how and why Medium uses things like pagination vs. infinite scroll, and grids vs. lists, among other design features.

As a User

Let’s start with the homepage.

This is what the homepage looks like when you aren’t logged in. It’s clean, minimal, and doesn’t have too much information for you to consume at once. Content is the main focus, but new users are drawn to sign up with sections blocked off in colour.

This is where Medium takes advantage of its black and white colour scheme. Because everything is so monochrome, the pops of colour are hard to ignore. In this way, Medium doesn’t need to make things large for them to get attention.

What I don’t love here, the inconsistency in alignment. You see the images on the left and right popping out of the margins the rest of the page seems to fit neatly into, but they’re the only two anomalies, and even then there’s no real symmetry. Why? Is it just because the images of the articles fit easier that way? Do you think it looks interesting and better? I don’t but I guess that’s a matter of opinion.

(A small thing that irks me, when you click on Sign in or Get started, the entire website shifts the TINIEST bit to the right.)

Another thing to keep note of here: the Popular on Medium segment stays pinned though the articles run through infinite scroll.

Ok, let’s take a look at the homepage after I’ve logged in.

First off, quick shoutout to whoever built the search bar. The header with the notifications, profile, and search bar is as pared down and minimal as you can get. But, it still needs to be functional, which it is because of their utilization of expansion and dropdown.

It’s beautiful, it really is. Completely seamless animation, appears and disappears as needed, but still fully functional. Kudos to you who made this search bar.

Moving on to the main content of the page, we see the same featured story section (with that same terrible asymmetry) that we saw when not logged in, and then a similarly formatted section for other stories.

On the right side of the page, we have a feed of stories for you to browse. It uses infinite scroll which I feel is a much better alternative here as opposed to pagination.

Pagination can be super useful when you want to limit the number of items that a user can see at once. It’s great for grouping things, making it easy for users to navigate between sections of items or find items again. For example, say I was infinitely scrolling and browsing clothing on and off for an hour. Then I suddenly remember that there was this kind of nice looking dress I saw half an hour ago. I don’t remember the name to search for it, so I have to go re-scroll back up to find it. It’s much easier for me to remember approximately what page number I was on to narrow down my hunt.

I do prefer infinite scroll for feeds, as do platforms like Twitter and Facebook. Why is it great? Most of the time if you’ve scrolled past something on your feed, it didn’t catch your attention and you don’t care about it. Your feed is also constantly populated and changing, which makes infinitely scrolled feeds great for viewing things chronologically or by relevance.

Now on the right side of the page, we have three segments. New from your network, Popular on Medium, and Reading List. We’ll refer to them as the “special segments”.

On the home page prior to logging in, we only had Popular on Medium and it stayed stuck to the top of the screen as you scrolled on the article side. Here, the right side does admittedly get stuck the same way, but it sticks the bottom of the segment. It makes more sense if you see it happen here.

Scrolling applies to the whole page here. So when you scroll to look at more articles in your feed, the special segments scroll too. Because they stick from the bottom, depending on your screen size, you get this weird cutoff of the second segment. It would look better to me if only one segment filled the screen, or better yet, we had them as collapsible segments so that all were able to be viewed when needed.

Say we have them all expanded on page load. As we scroll down and sticking becomes an issue, we just auto collapse them in the same kind of beautiful way the search bar expands and collapses.

I feel like every person values a different segment most, maybe even only one of them at all. By allowing collapsibility, we allow users to only view what is most valuable to them. It adds a small level of customizability while not impacting the design and build of the page too much.

Finally, I want to quickly talk about how Medium uses both lists and grids. As we just talked about, the feed is an infinite list. However when you look at a topic page, for instance Design, we see that Medium fully uses grids. What are grids good for? Getting a lot of data onto the page at once. When you’re trying to figure out what someone wants, sometimes it’s easier to show them all their options and let them pick. That’s why discovery pages are best friends with grids. Lists are better for pared down sets of data, which is why they’re better for the feed.

Otherwise, I love the design of the article blurbs, the appearance of interactive actions as you scroll through an article, and the overall aesthetic of the page.

As a Writer

I actually really like the experience of writing on Medium. The minimal look of the page helps me focus, and the autosave is both un-intrusive and helpful. If you’re a lover of Bear, then you’ll really like this writing experience. Publishing and tagging is easy and simple, linking to my articles on other platforms is easy because of the rich embedding, and I like being able to share drafts privately with a simple link.

What I find mildly annoying is that although you can choose to show keyboard shortcuts, it isn’t easy to make appear, and you kind of want it to be easy to pull up and close. The segment is big and clunky, and you have to manually click to scroll to see all kinds of hints and tips, many of which I as a writer don’t usually care about. It also lacks things like the shortcuts to change the focal point of your featured image (something I keep having to look up to remind myself of).

Here’s a screenshot of this article being written. The shortcuts panel is about a third of the page vertically.

I’d love for there to be a shortcut to bring up the keyboard shortcuts panel, and the ability to customize what’s on it. This would be a feature that could improve the productivity of Medium’s own content creators.

(Second small note: I’d love to see an animation on the dropdown arrows. It’s totally not needed, but it is appealing to me to see the change happen visually. IDK totally probably just me.)

Here’s one last thing. It’s not completely ridiculous to think that a writer could want to have a list start in one section of their work, and continue after a bit of explanation. Unfortunately, you can’t do that here. Once I start a list like so,

  1. Here’s my list
  2. I automatically get a continued list once I’ve hit enter.
  3. But,

perhaps I decide I want to pause and explain a point in greater depth. Maybe use some fancy quote formatting.

4. Sorry but my list is now gone.

  1. I can start a new list no problem,
  2. but my last list has officially ended.
  3. How
  4. unfortunate.

TL;DR

All in all, Medium has a really nice user interface and experience. Some of their design choices really enhance the look and flow of the page. Key things I love about the design of this page include:

  • minimalism achieved through expansion and collapsability
  • use of colour to emphasize importance
  • monochromatic colour scheme to draw attention to content
  • infinite scroll over pagination
  • effective use of grids and lists

Some areas I think the Medium could change up their UX/UI are:

  • the sticking of the special segments when you scroll on the home page
  • the keyboard shortcuts panel
  • support for continuing lists

https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href


Medium: A UX/UI Review was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.



Source link https://uxplanet.org/medium-a-ux-ui--f8fdffc86a89?source=rss—-819cc2aaeee0—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here