A lesson in UI design: The Slate App

You hear the acronyms UI and UX thrown around quite a bit in the mobile  technology space. They are the 2 most important factors when it comes to designing anything, not just software.

For those who don’t understand the basic concepts of User Interface and User Experience in design, it is important that you do. Why? Because you are the reason most Manufacturers design things the way they do.

Let’s take for example a hamburger. Most people like a good burger. What makes a good burger? Many things. The ‘good’ in a good burger is User Experience. It is whatever it is about the burger that makes you feel good.

Since people buy on value, eat to feel full, and appreciate flavor, these impact User Experience. User Experience is mentally perceived, can be visually controlled and is physically realized. If a burger is delicious but 1/4 the size of a decent tasting burger for the same price, that could lead to a poor User Experience. If a huge 3 pound burger that is $.99, tastes like crap but you still manage to choke it down to feel full, again…poor User Experience.

There are certain aspects about the burger in its presentation and quality of build materials that also impact User Experience called, User Interface.

For example, when coming in contact with fast-food most burgers will come wrapped in something, and placed in something else. This is because the initial visual presentation is important to perception. What would happen if you pulled up to the drive-thru and the cook shoveled an assembled, unwrapped burger into your hand? Most would be concerned, but probably for the wrong reasons

If you think about it, a wrapped and bagged burger has likely been handled by 2 other people and has probably been sitting out for a bit. However, a burger from the Cook’s spat is likely to be the freshest, least handled version. But because of perception, wrappers and bags seem to imply cleanliness and proper handling of food. Perception is important because it impacts User Experience.

Good interface design
Good interface design

If you unwrap your burger or are presented with a burger with that half-wrapper at the ‘bottom’, this is an example of great User Interface design. It is the engineering behind the physical interaction of the product. Wilted lettuce, pieces of cartilage in the meat, soggy buns, a cold hamburger,  stale burger buns or a burger that does not have appealing flavor  are examples of poor User Interface design.

Poor User interface design.
Poor User interface design.

 

So, to summarize:

How the consumer (User) physically comes into contact (User Interface) with the burger (hardware/software) and creates a feeling or perception (User Experience) of the product is important.

Other factors such as marketing and post-sale support also have a hand in perception and therefore, UX. But in this piece I’m going to show you the impact of how one small decision in design can have a cascading negative effect on a product, even though the content (this is a media outlet application) is never called into question.

slate

I read some Slate articles when they are tech based, but I don’t purposefully go to Slate.com for my news. I disagree with the premise behind most of what I read but it’s nice to get differing view on things.

The Chief Editor posted a message about a new spin of their iOS application and they were really proud of it, so I decided I would check it out. This message has either been moved or removed since then, because I wanted to make some comments about the issues in the design. It seems many others had the same intention, but decided to express themselves using the AppStore review process instead. Let me show you what happened.

This is how the UI is presented:

The UI is presented as a one column mason grid, with one story representing each block. The title text has a scrolling parallax which I found quite aesthetically appealing, while others did not. Sans parallax, the design of the UI on both the application and the mobile web design are congruent. These are a couple of things they did well.

When the user taps on a block that contains the story they want to read, the single post view is called up:

Slate.app single story view
Slate.app single story view

The user scrolls down to consume the rest of the story. Once finished the user can swipe left or swipe right to advance to the next story or retreat to the last, while still remaining in single post view:

last story
Swiping left to right in the main body of the page view

 

But if the user wants to return to the main index (shown in the video) there is only one way to accomplish this. He or she must touch the back arrow in the upper left corner of the display. This is a departure from current human interface guidelines in iOS, and the way the web-based interface of Slate.com can be used.

Before you state your objection to my last sentence because you know native iOS applications implements the same design…

iOS settings back
Tapping ‘settings’ in the upper left will ‘go back’ to the last page.

 

…allow me to reassure you that iOS system wide gesturing understands the difference between a swipe in the main body and a swipe from the edge of the bezel.

swiping back
Swiping left to right from the bezel to go back to the last page.

 

This has been implemented for years and is used now more than ever with the larger screen devices, and is the sole reason why ‘reachability‘ in iOS was invented.

Using the Slate.app vs. Slate.com to consume their news media is now dissimilar in function and control to the iOS user during one-handed operation. Instead of a left to right swipe from the bezel edge to return to the main index (like Pulse and most other applications do for example) the user must double tap on the home button for the reachability control, and then tap the arrow to go back.

reachability
Invoking reachability by double tapping (not pressing) on the home button.

 

They have effectively made it 3X the ‘work’ to accomplish the same task than they should have. When you aggregate the time wasted by calculating the number of users and the number of times they have to do this, that equals a lot of inefficiency.

Here is just a small example of what that decision in the UI design earned them:

Thanks for reading.

Advertisements
%d bloggers like this: