Max Rudberg

Posts tagged ui

Jan 20

✎ Flat UI is not the only way forward

It’s curious how Apple’s hardware and software have taken such divergent paths. Looking at iOS hardware and software separately, one might think they were produced by different companies. The drop-shadows and textures of iOS stand in sharp contrast to the clean lines and invisible seams of Apple’s hardware. Comparing major models of either the iPhone or iPad line, Jony Ive’s industrial design team seems to be on the march, creating devices that feel ever more like they’re carved from a single block of magical stone. So why is it that Apple would ship these devices with software featuring deep shadows and visible stitching?

The above quote from Dave Wiskus was used by John Gruber to argue that the future of UI design is one without textures and effects that mimic real world objects or materials. I would argue that they are observing design decisions in one craft, industrial design, thinking that it applies to UI design as well. But industrial design and UI design have very different characteristics, just like print has different characteristics compared to screen design.

The hardware and UI also have different roles to play. The hardware is constant, not changing, and should take as little of your attention as possible. This goes perfectly in line with what Apple are doing; reducing the hardware to a minimum with clean lines and invisible seams. As technology gets better, the hardware gets out of the way even more. The hardware sets the stage for the user interface, and its content, to shine.

When you launch an app on your mobile device, the device essentially becomes that app. Screens are great at drawing fine details and subtle gradients. Its part of a UI designers toolbox to make use of textures, shadows, light effects, etched or embossed elements and so on to make the UI tangible and understandable. I don’t see them going away.

With Jony Ive now heading up Apple’s human interface group, in charge of both hardware and software, we will see some changes. But I think they will not be as drastic as some make them out to be. It will rather be a slight correction of trajectory that will steer clear of extremities such as Find My Friends in the future.

On a system level I hope to see more of the fine and subtle improvements we saw in iOS 6, where default elements with a glossy look was replaced with matte gradients, the pinstripes background was refined and subtle drop shadows were added to give more depth to navigation bars, making it clear that they are sitting above scrolling lists and that the list will move underneath the navigation bar. Sounds obvious, but it’s a subtle improvement that makes you understand behavior from looking at a static screen.

Jony Ive talks about being true to the characteristics of a material, such as the ability to make a sturdy unibody out of a single piece of aluminum. I wonder what that approach is when it comes to user interfaces? Some would say a “flat” look is “truly digital”, but I think the flat style is just that; a stylistic choice. There isn’t really anything to be true to, except the user and helping them understand the device and its apps as easily as possible. If you can use textures and UI effects to help you with that goal, I think you should.


Dec 28

✎ If you see a UI walkthrough, they blew it

Clear, Rise and Solar are three examples of a trend of “gesture driven” apps with a flat UI. These are novelty apps for people lusting for the very latest in app design. Besides using a more flat UI style, which is a topic for a different discussion, all apps contain non-standard interactions. This means users don’t know how to use them beforehand, and all start with a multi-step UI walkthrough before you get to use the app.

image

image

image

These apps have chosen to reduce details to achieve a minimal UI, but in the process the UI has also become harder to use. Unfortunately a UI walkthrough is quite an inelegant way to explain the core functionality of an app. It can be a frustrating obstacle before you can dive into an app, and you have to remember all of those new ways of using it once you get in. 

The problem is mainly the lack of visual cues; there is no way to tell that sliding the main screen to the left will toggle the alarm on in Rise, or pinching a list in Clear will minimize it and take you up a level in the hierarchy. It’s not obvious, and what’s often called mystery meat.

Arguably a less intrusive way compared to a walkthrough is to guide the user in the situation with UI hints. This can be done through slight visual cues and animations. A hint should not be a popup (it’s probably even more disruptive than a tutorial).

Some examples of clever explanation of UI gestures include Apple’s own camera lock screen sliders. Just tapping on the camera icon makes the screen jump, briefly revealing the camera UI behind the lock screen. This combined with the ridges above and below the camera tells the user to slide the lock screen up. Before this behavior the camera was activated by a mystery meat action; double tap the home button and a camera button would appear to the right of the Slide to unlock well. There was no way to find it unless you knew that double tapping the home button was possible in this screen.

image

A more hands on approach can be found in games which often deals very well with progressive disclosure, revealing game mechanics as you move further into a game. In Pudding Monsters, if you sit idly by when facing a new scenario, an animated hand will appear and make a sliding motion. It’s inherent in humans to mimic actions we see and it immediately becomes clear how to proceed.

image

In our own iPad cooking app Filibaba Meals, which is soon to be updated for the iPhone, we have adapted the recipes to work equally well on the smaller screen. To do so effectively we have the ingredients in a separate layer to the left of the description. To make it obvious that there is something more to the left of the current screen, there is a subtle animation that moves a piece of paper into the left part of the screen each time you pick a recipe. It’s subtle enough not to get annoying over time, but still serves as a UI hint the first time. We allow both tapping the piece of paper, as well as a horizontal swipe anywhere on the screen to move to the ingredients view.

image

When it comes to teaching users to use your UIs, I would recommend to do so mainly by progressive disclosure with slight visual cues and subtle animations - only use a walkthrough as a final resort.

Update 2012-12-28:

I just wanted to clarify my thoughts a little. It’s easy to pick on a few apps and present a few solutions that worked in other cases.

First off, the headline I picked for this article is a nod to late Steve Jobs “If you see a stylus, they blew it” and there is a disconnect between it and what I present in the article. I used it because I thought it would provoke a reaction, which it clearly did. If I were to do it again, I’d probably pick something more descriptive of my point.

I like Clear and understand the need for a walkthrough in that app. Clear brings many innovative features and tries to improve on the foundation of iOS through a more gesture based navigation that minimizes UI elements. And that’s a hard thing for a single app to do without giving the users some pointers. So I think the walkthrough is justified in Clear’s case, although perhaps given some iteration it could be transformed into a more gradual discovery. They already have an excellent starting to-do list that teaches the user basic functionality of the app.

Phill Ryu, from Impending, said:

"I … consider it a suboptimal solution we rushed in to fix a more broken situation (without [the walkthrough])"

Phill Ryu:

"I agree with your point Max btw, it’s just extra tricker to do! I hope we can improve on it someday"

I don’t have any solutions for Clear and consider myself a fan, so if anyone can do a good job improving on an already excellent app, it’s them.

What’s ironic is that Rise and Solar so closely follows Clear’s formula. Without the walkthrough, they are hard to explore on your own.

Phill Ryu agrees of the irony:

"… It’s definitely a weaker spot. those apps taking inspiration should try to innovate there!"

Jeremy Olson of Tapity has an interesting follow up article; “Are UI walkthroughs evil?


Feb 17

If a phone were to be designed with an edge-to-edge screen, it would lack a hardware home button on the front. Therefore it would require a new way to go to the Home screen. Advanced gestures often requires two hands, which is not optimal for such a frequently used feature. 

A more intuitive way could be to equip the phone with a pressure-sensitive body. The phone could then be squeezed and the current app would shrink and return the user to the Home screen. 

This could be a real wow effect. Seeing how the phone reacts to your grip and then having the app vanish in the palm of your hand. 

To avoid ‘squeeze to go Home’ from happening by accident, a visual cue could show that pressure is being applied. In this concept, the app begins to shrink to reflect the pressure that is being applied. When the pressure goes over a defined threshold, the user is returned to the Home screen.

The strength of a users grip will of course vary. Therefore, a setting for how much pressure that’s needed before an app is exited could be a good idea.


Copyright