Apps for tablet - layout, design, minimalism vs. Eye Candy

Fig 1

Fig 2

Fig 3

User interface design is fast becoming a central element in my work, as designing an app demands that I think about the process the app will take the user through and what they are going to take from it.  Therefore this was a good point to start reading up on successful UI designs, in the hope that it would help shape my work (as I'm still a bit of a rookie in that area).

Usability Post's articles are a great place to start, as there are plenty of articles discussing common topics and issues in user interface design.  Dmitri Fadeyev's article, Restraint, was a useful guide on the issue of "to fancy or not to fancy, which is an issue I have always grappled with.  As a starting point, his views on what good restrained design is was helpful in showing me where to look.  "The iPhone uses the minimal design possible.  There is only one button and the whole phone is essentially one big display.  Apple always uses simple geometric shapes - there are no unique curves or design elements sticking out - it's just symmetrical curves, circles, rectangles and lines carefully arranged to form their iconic minimalist, industrial design." (Fadeyev, 2009).  

Further more, Fadeyev writes:  "…when you're working on something like a web app,  where clarity and usability comes first - focus on that and restrain yourself from adding eye candy that will do nothing but distract the user from what they are doing. …If the visuals don't help, they don't need to be there.  What's left can be fashioned by you to create the look and feel unique to your brand." (Fadeyev, 2009)

Fig 4

Fig 5

Conversely, Stephen Anderson's In Defence of Eye Candy on the List Apart website argues that, with regards to aesthetics, we must consider every stimulus that might influence interactions." He writes:
"…aesthetics is concerned with anything that appeals to the senses  - not just what we see, but what we hear, smell, taste, and feel.  In short, it is how we perceive and interpret the world…" (Anderson, 2009)

"Perhaps more importantly, aesthetics examines our effective domain response to an object or phenomenon (according to Wikipedia).  In other words, aesthetics is not just about the artistic merit of web buttons or other visual effects, but about how people respond to these elements.  Our question becomes: How do aesthetic choices influence understanding and emotions, and how do understanding and emotions influence behaviour?" (Anderson, 2009)

The example Anderson uses to demonstrate his point is that of two buttons (above). "Here, aesthetics communicates function.  The example on the right resembles a physical button.  The beveled edges and gradient shading remove any doubt about its function.  In this case, these are characteristics of affordance, which are aspects of design that help a user to discover how they might interact with an object.  Translation: if it looks like a button, it must be a button." (Anderson, 2009) Furthermore: "research into attention, persuasion, choice, happiness, learning and other similar topics suggest that the more attractive button is likely to be used by more people."(Anderson, 2009)

What's interesting about this opinion is that, despite Fadayev's impassioned preaching for simple design which has already been proven to be successful, there is also scientific evidence to the contrary. "According to a 2002 study, the 'appeal of the overall visual design of a site, including layout, typography, font size and colour schemes' is the number one factor we use to evaluate a website's credibility...Attention to detail implies that the same care and attention has been spent on the other (less visible) parts of the product - which implies that this is a trustworthy product." (Anderson, 2009)

At present, I feel like my practical work kind of straddles the two (you can judge for yourself when I post it soon), but Anderson sums up his point of view in a way that is difficult to argue with: "If we believe that style somehow exists independent of functionality, that we can treat aesthetics and function as two separate pieces, then we ignore the evidence that beauty is much more than decoration. Our brains can't help but agree."

With regard to the "skeleton" of the interface, Fadayev also wrote a helpful article on "8 Characteristics of Successful User Interfaces", in which he covers some point I will bear in mind when bringing my designs into Invision:  "Responsive also means the interface provides some form of feedback.  The interface should talk back to the user to inform them about what's happening.  Have you pressed the button successfully?  How would you know?  The button should display a 'pressed' state to give the feedback."

Fadayev preaches the importance of keeping the layout of a web design piece consistent throughout the user's experience. "Consistent interfaces allow users to develop language patterns.  They'll learn what the different buttons, tabs, icons and other interface elements look like and will recognise them and realise what they do in different contexts."

The main takeaway I have from this is to keep the content as simple as possible, from the homepage and the icons that lead to the next page, to the copy giving context to the illustrations.  I am working on creating a layout for the app that will adhere to the point Fadayev makes above about a consistent interface, as I don't want my design to cause confusion.  Feedack is going to be one I will find out about along the way, as while I am keen to use modal windows I don't know yet how it will work with touch screen.

References

Anderson, Stephen P.  2009.  A List Apart Website.  "In Defence of Eye Candy" [online article] Available at: http://alistapart.com/article/indefenseofeyecandy
[Accessed 20th Feb 2015]

Fadeyev, Dmitri.  2009.  Usability Post website. "Restraint".  [online article] Available at:
http://usabilitypost.com/2009/10/02/restraint/
[Accessed 20th Feb 2015]

Fadeyev, Dmitri.  2009.  Usability Post website. "8 Characteristics of Successful User Interfaces".  [online article] Available at:
http://usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/
[Accessed 20th Feb 2015]

Images

Fig 1 Guide, 2014. Guide home screen. [online image] Available at: https://econsultancy.com/blog/64170-20-stunning-examples-of-minimal-mobile-ui-design/
[Accessed 24 February 2015]

Fig 2 Ink Ration, 2014.  Everyday App [online image] Available at: https://www.pinterest.com/pin/159877855497065549/

Fig 3 Robocat. 2013. Haze [online image] Available at:
https://itunes.apple.com/gb/app/haze/id594476963?mt=8
[Accessed 24 February 2015]

Fig 4 Datamine lab. Unknown

Fig 5 Datamine lab. Unknown