UI Design Dos and Don'ts

https://developer.apple.com/design/tips/

by medyo • 11 years ago

188 119 11 years ago

developer.apple.com

marvel_boy• 11 years ago

I wish apps designers respect this simple dos and dont's.

shogun212• 11 years ago

Many of these are blatantly obvious. Most bad design isn't because people don't know better; it's due to laziness.

vogt3• 11 years ago

Agreed completely. This is all Design 101. I'd worry about someone who was employed as a UI Designer who did not already understand all this inherently.

plorkyeran• 11 years ago

A large portion of the apps on the app store did not have someone employed as a UI Designer involved at any point.

emsy• 11 years ago

I agree that most of them are obvious. I don't agree that bad design is because of laziness. There are many reasons for bad design and most of the time I'll only find one or two of the "dont's" in a given app, but this will ruin my experience. Case in point: I can't even count the number of HN readers I deleted because they didn't display the content without vertical and horizontal scrollbars or had really small text. Everything else was fine though.

shogun212• 11 years ago

Good design is hard. It takes research and effort, and often has to go through many iterations.

I say it's due to laziness because if the developers had the time, they would adjust the text and scrollbars for a better experience.

oldmanjay• 11 years ago

Everything is obvious once some entity has spent 30 years collecting and refining the practices.

on_and_off3• 11 years ago

Most of the stupidly bad design decisions I have seen come from somebody high in the hierarchy (product manager, CEO or founder) demanding a change, even if both designers and developers rally on how awful it would be. I have not yet found a solution to this problem.

vogt3• 11 years ago

The book Articulating Design Decisions (O'Reilly) deals specifically with this. It's always an uphill battle, and the book's overall lesson is "empathize as much as possible", but it's a great read. It has definitely helped me in dealing with more difficult management types who don't understand the design or technical side of product building.

jamesdelaneyie• 11 years ago

would A/B testing, in some capacity, the decision in some form or another, help with this?

johanbrook• 11 years ago

Most design sessions during WWDC last week was pretty much "Apple-stating-the-obvious-for-40-minutes". I don't know what the target audience was.

frandroid• 11 years ago

The D in WWDC doesn't stand for Designers...

LoSboccacc• 11 years ago

While tips are blatantly obvios, the very article that lists them is on a non responsive website that is paginate like shit on chrome/ios. Go figure.

ffn• 11 years ago

Well, good design is obvious once you know it. But before you know it, it's as opaque and obtuse as anything else. It's just that design has this strange property with us humans in that, when done right, it feels so natural and emergent to us to the point we automatically take it for granted the instant we "get it".

In the realm of modern-day web-design, most bad design is because the website was built before a lot of these good design principles and conventions were invented (e.g. responsive grids, tons of padding, flex-direction(column), etc.). Next followed by prideful "designers" who steadfastly refuse to use a design framework because the site they're building must be a special snowflake. Next followed by the missing-the-point-followers of RMS (that is, they're not following RMS for the free software philosophy) who plainly look down on CSS and design as something that is beneath them. Finally, I'll give you laziness.

megablast• 11 years ago

laziness

Or more likely time constraints.

kayman2• 11 years ago

Without being there at the time the decisions are made, a lot of it appears to be laziness to someone looking from the outside. It could be laziness, but a lot of times, I found that it was time constraints to deliver and fix it later, but later never comes or it's not important enough to revisit and change.

prawn• 11 years ago

Often due to client decisions or pressure in my experience.

rwallace2• 11 years ago

I'd find it more forgivable if it was laziness, but I've seen too many cases where designers put in extra effort to make things worse to believe that. I think it's ego. Good design is about doing what the users want rather than what the designer wants; bad design is the reverse.

AgentME• 11 years ago

This list helps people realize where they've been lazy.

Mandatum2• 11 years ago

These are common sense design "do's" and "don'ts". Most developers, and any designer worth their salt should know these.

radley• 11 years ago

Sadly, Apple is guilty of these often, with too many examples to list (but particularly contrast).

(eg. @eli_schiff - he's been ranting about them today).

MaysonL• 11 years ago

That very page would definitely be improved by darker, larger text.

__z3• 11 years ago

Back in 1999 the Interface Hall of Shame did a takedown on the Quicktime 4.0's interfact - and noted it violated Apple's own human interface standards. Worth a read. http://hallofshame.gp.co.at/qtimeno.htm

(I also saw irony in a page with poor color contrast telling you to avoid poor color contrast)

kagamine10• 11 years ago

They're all guilty and they should all be hanged, only today I was asked to set up 2-step auth for a Google account and I see that Google are still using "ex" to mean example for telephone numbers. For those of old enough to remember this looks awfully like the old "ext." meaning extension. Since when did "eg." become too hard for people, it is the established abbreviation for example in English. The only reference i could find to "ex" outside of google was a wiki-something page using it. Is this something I should have been made aware of before now in my decades long life?

enlightenedfool• 11 years ago

FWIW Apple, Don't: Force the user to backspace all the way to the word to correct in textbox Do: Focus the cursor on where I touch. Frustrating.

molecule• 11 years ago

Tapping and holding anywhere there's editable text will engage the magnifying glass mode so you can move the text cursor around.

http://lifehacker.com/5879239/all-the-awesome-things-you-can...

scottfr• 11 years ago

I was hoping for something like:

http://dropbox.scripting.com/dave/misc/appleHumanInterfaceGu...

300 pages of detailed ui/ux guidelines and rationales. It honestly was a joy to read when I first came across it 15 years ago.

jamesrom• 11 years ago

The article links to the iOS HIG.

https://developer.apple.com/library/ios/documentation/UserEx...

rdsnsca2• 11 years ago

Its available on the iBook store too.

johnnyo• 11 years ago

Agree with these, but in my opinion, the date selector wheels in iOS are a terrible design. Three rolling wheels just doesn't map to most people's concept of a calendar

Mandatum2• 11 years ago

Do you have a better example? I don't find the select diag's like in Desktop Chrome easier to use especially on a mobile. I think what they've done is better than anything else I've seen. With enough following it'd become the norm like anything else.

themartorana• 11 years ago

I actually wanted to state the same thing the GP did - the date selector is terribad. It was much better before "The Flattening" in iOS 7. IMHO.

I find sometimes I have difficulty understanding where the bounds of the control actually are. That's not good design, and it seems far from obvious.

ilovecomputers• 11 years ago

Cultured Code's date picker for Things has been my favorite: http://culturedcode.cachefly.net/things/videos/things-iphone...

juriansluiman2• 11 years ago

Android has a simple calendar which you can swipe to change the month. Click on the year and a year selection is shown.

The time is a clock where you're able to select the hour first and minutes thereafter. This is the most intuitive mobile touch interface I have seen so far, any other is really small, awkward or not mentally easy to comprehend.

Image: https://raw.githubusercontent.com/CiTuX/datetimepicker/maste...

jonahx• 11 years ago

Agree. I would rather try my luck tapping a too-small calendar date as pictured on the right. I'll often get it right the first time, but even accounting for the extra time of an error and a retry (2 extra taps) it will still be faster and less frustrating than setting 4 separate scroll wheels.

beloch• 11 years ago

This is a great example of when it's more important to stick with a familiar interface (i.e. the calendar) than to go with something that is "designed for touch".

BillinghamJ• 11 years ago

I would wholeheartedly disagree - I think this is a great example of where you should break from common desktop norms and provide something which is easier for a big stubby thumb to use.

vbezhenar2• 11 years ago

What I absolutely hate is minute picker. 60 items is just too much to scroll. For most usages 5 minutes step is enough and 12 items much better.

As for calendar, I never had any problems with it. Of course it's not standard way that most people get used to, but I think any person will understand what to do.

Y-bar• 11 years ago

100% in agreement with you. I can't remember the last time I needed to add a time with more granularity than 5 minutes. And the iOS date picker actually [does allow for custom granularity](https://developer.apple.com/library/ios/documentation/UIKit/...) up to 30 minutes.

But I guess there is no easy way to accommodate for both those that do need 1-minute intervals and those who would rather have 5-minute intervals (without adding yet another UI element or yet another setting to toggle).

b15h0p• 11 years ago

A double tap on the minute picker switches between 1- and 5-minute increments, afaik.

k-mcgrady2• 11 years ago

Personally I love them. I hate when apps put in their own calendar control. It's always more time consuming to get where I want whereas with the wheel I can quickly spin it to move to where I want quickly.

ehmorris• 11 years ago

A page about mobile design dos and don'ts and it's not even mobile optimized!

rimantas2• 11 years ago

I build my apps in Xcode, and it does not even run on my phone!

nielsbot• 11 years ago

Surprising how many of these people get wrong. I think this page is for people building apps without help from a designer.

gtirloni• 11 years ago

Just sharing this link since a11y gets so little attention:

https://developer.apple.com/library/ios/documentation/UserEx...

wampus• 11 years ago

Apple has been a driving force for better UI in a number of areas, but some of their choices are baffling. Even in this page, the "Contrast" section uses a large black header, but a small grey font on a white background for the content. Who chose Shift-Command-] for switching tabs in Safari? Why include the power switch in the keyboard, which makes it challenging to clean? Could their glossy displays be any more reflective?

bananaboy2• 11 years ago

I also feel like iOS has gone downhill. I know they were trying to get away from skeuomorphic design, but I feel they went too far in the opposite direction. Everything is flat, it's hard to tell what is a button that can be clicked on sometimes (usually it's just a blue label with no distinguishing background), and there seems to be a frequent lack of contrast generally.

batiudrami• 11 years ago

Yeah, also I feel the rainbow colours with a Gaussian blur looks pretty dated too - reminds me of Aero Glass. Android at its best looks much nicer, though it can be very inconsistent, even within Google-developed apps.

rbritton• 11 years ago

I've never fully embraced Apple's view of flat design for that reason. I feel buttons should resemble something that looks like it can be tapped on, and that that is not against the current aesthetic of iOS (e.g., http://ipadportfolioapp.com/images/overview/Customization_2x...).

gurkendoktor• 11 years ago

I found it interesting that the button in the link actually has a border. When will we see bordered buttons in iOS again? iOS 10?

namenotrequired• 11 years ago

This very page is also a bad offender of the very first principle...

wingerlang• 11 years ago

Definitely. The titles seems related to the image above them, not below as intended.

camillomiller• 11 years ago

Well, even better: this page [https://developer.apple.com/library/safari/documentation/Net...] is two clicks away.

sandofsky5• 11 years ago

Most likely, that shade of grey was chosen precisely because the section headline is black. If both were black, it would compete with the typographic hierarchy, making it distracting to skim the entire page.

Good design is a form of engineering. You have a set of principles and successful patterns– such as the ones on the linked page– but your job is adapting to real world constraints. In this case, the challenge is making a headline look like a headline only relative to the example, not the page.

As far as the Safari tab shortcut, that's consistent with the rest of OS X. How did they originally arrive at that shortcut? They probably tried several combination, all within reach of the home keys, and that felt most right.

Why include the power switch on the keyboard? I know every user's first question is "where is the on switch?" and that position seems highly visible, and it can be consistent across all macs. In my entire history of using Macs, I've never had an issue cleaning the power key.

No idea why they made the displays more reflective. But given their overall attention to detail, a lot of thought probably went into it.

DanBC• 11 years ago

Attention to detail?

http://imgur.com/Q9AhXKI

That font, in the section that talks about the importance of larger fonts, is fucking tiny.

mhomde2• 11 years ago

"a foolish consistency is the hobgoblin of little minds"

Washuu2• 11 years ago

OS 10.9 and iOS 7 have taken contrast and thrown it out the window. They are both following current designer trends of less contrast overall while claiming better readability. The low contrast trend started around 2011 to 2012 with web sites. It typically takes Apple one year to catch up with the trends on their operating system releases.

Both their recent releases result in more eye strain for me looking for a way to fix their messed up ideas of contrast.

mikro2nd• 11 years ago

Do you suppose that this might be related to the oft-discussed-on-HN ageism that the Silicon Valley-based industry is accused of?

Low contrast may be pleasing to twenty-something year old eyes, but unreadable to fifty-something year old eyes, and, if I consider my own attitudes and thinking at a younger age, I would almost certainly not have been considering how UI design choices would impact people with less-than optimal vision but for a mother-in-law with severe vision limitations.

kaolinite3• 11 years ago

You can switch tabs in Safari using Ctrl + Tab (and Ctrl + Shift + Tab to go backwards).

kagamine10• 11 years ago

Grey text on a white background is generally accepted as easier on the eye/mind when reading sentences, whereas on the header it is not necessary, it's just one word, there is no train of thought to follow there. This would be considered good UX [source: I don't have anything to link to right now, but I do have a degree in Interaction Design]

The rest of your points get top marks and I hope to Cod that someone at Apple is listening. The power button on the keyboard is retarded (no other word for it, sorry), super glossy screens so you can't even see it in your own house.

As for Apple shortcuts, well, many make perfect sense and this isn't something anyone else does better. MS Word even changes them depending upon system language, so Word in Norwegian uses Ctrl+F for "fett" or bold. Imagine how annoying that is when someone asks you for help. It happens at application level too, especially with non-US keyboards, just press ctrl+[ to access this feature, and no you cannot remap the shortcuts. Well, dandy, I can't access [ without pressing 2 other keys already. So I'll just press the X in the corner instead.

TuringTest4• 11 years ago

Grey text on a white background is generally accepted as easier on the eye/mind when reading sentences

That may the single most propagated unfounded myth in UI design this decade. [1] While it's true that pure black on pure white causes problems for some dyslexic users, there is also a _minimum_ required contrast [2], which is routileny ignored by many "stylish" web sites.

The plague of contrast-less "light grey on white" have been adopted by plenty of "web 3.0" sites out of following fashionable trends, to the point of making them unreadable.

I've been forced to place a "Contrast" bookmarklet on the toolbar of all my browsers to fix all those terrible contrast-less pages I found everywhere, and I'm forced to use it dozens of times a day to alleviate my aching eyes. (Hexadecimal #333 is my personal upper level of comfort on white backgrounds, anything above that begins physically hurting my eyes when reading any kind of long text).

[1] http://contrastrebellion.com/

[2] http://www.w3.org/TR/AERT#color-contrast

coldpie5• 11 years ago

Grey text on a white background is generally accepted as easier on the eye/mind when reading sentences

This sounds like wives-tale baloney. Please disregard this "advice" and make your text readable. The text on this page from Apple is too low contrast.

mlex• 11 years ago

I thought they'd have a more detailed document like this: http://iosdesign.ivomynttinen.com/

rdsnsca2• 11 years ago

They do one the website and the iBook store.

exodust3• 11 years ago

"Images that are not @2x will appear blurry"

That's quite an exaggeration.

"Blurry" is not what most people would perceive. They won't perceive a problem with the site at all and in most cases will never notice or care.

Sure it's nice to use hi-res images, but I prefer using just one image that is slightly higher resolution than normal... maybe 1.5x and then increase compression. The result is noticeably better, satisfying the perception of "sharp" but still uses just one image and often only a very small increase in file size.

Delivering two versions of the image for all your regularly produced content is an inefficient practice relative to the benefits IMHO.

sandofsky5• 11 years ago

What advantage is there to shipping a single asset?

On the web, use the "srcset" attribute on img tags. If the device supports @2x, it'll fetch the right version.

On an iPhone app, any advantages are far outweighed by the headaches of resizing "@1.5x" assets for each device resolution.

Now consider the iPhone 6+, which has @3x resolution. At 1.5x it feels blurry.

But forgetting that, would @2x users notice? They won't be able to articulate something is wrong, much like if you pick a suboptimal line height, they won't be able to articulate "it's less legible." It's all these little things, combined, that make a project feel amateurish.

exodust3• 11 years ago

I suppose this article is about iOS apps, so I should stay away.

Nobody is "shipping" anything on the web. I've never understood the use of the word, even for apps. Something that is shipped cannot be touched or modified after release. This isn't the case on the internet.

For the normal operation of a website, needing to make only one image per product item is obviously more economical for whoever is making the content, not to mention the technical hassle faced depending on your CMS and how it handles image assets.

Making the image slightly more hi-res, say 1.5x, and then compressing it more aggressively has the benefit of satisfactory sharpness and quality on high density displays, while compressing to a size similar to the low res. I've confirmed this and use this technique, as others have.

For example instead of the normal 800 pixel wide product image, you make it 1200 wide but compress it more when making the jpeg, say 55 instead of the usual 70. The result is a nice lean and sharp image without the bloat of a "2x" file size, and without any perceivable quality loss from increased compression. The increase in resolution serves to hide the compression artefacts surprisingly well.

I'm talking about responsive of course, so there is no fixed width specified in the tag.

iPhone 6 has 3x res? So what? It's an iPhone with a physically small screen. People hold those screens in their hand - arms length from their eyes. You won't see any difference between a 1.5x 1200px wide jpeg photo and a 3x 2400px wide image on that screen. Not until you get your magnifying glass out, or pinch and zoom will you see a difference.

Not a fan of "srcset", it's not well supported and promotes a clumsy multi-res production workflow, which isn't needed for regular jpeg content images on the web - the point I'm getting at.

erlkonig• 11 years ago

Their "contrast" section belies their determination, since the text there is grey on a white background, and true black on white would unquestionably be more readable. (looking at UI designers more generally:) I'm so sick of UIs that have repetitive, huge, contrasty, readable headings... only to have the core useful text be grey-on-something, tiny, possibly italic, and so on. Idiots, and they are legion. More subtle issues like older folks having lower visual resolution, and many folks (men mostly) having significant color blindness, never seem to occur to UI designers as a problem.

rimantas2• 11 years ago

Black on white is actually bad combination, it strains the eyes.

kagamine10• 11 years ago

Black on white is a hand-me-down from print that made it's way to web without anyone giving it much thought. It is indeed too great a contrast for back-lit screens. Google results also show the page descriptions using grey on white. Surprising that so few people know of this.

coldpie5• 11 years ago

Perhaps, but light-grey-on-white strains my eyes much, much more.

thewhitetulip• 11 years ago

Android be like: been there done that

kagamine10• 11 years ago

Android be like, press anywhere on the row to check the box on the right. And anywhere on the row to go to the next page in the menu. And anywhere on the row to do nothing, but press the arrow all the way to the right to go to the next page. Android be liek: we didn't think this through. At all.

Not defending some of the choices Apple make, but if you want to get into an old-style flame war of Apple UX versus Android / Win / Linux / anything, you better come with a better argument than that.

cairx• 11 years ago

Is it ment to be ironic? Considering that I'm reading this from a phone and they don't even follow their own first point "Formatting Content".

Animats• 11 years ago

Apple's watch UI document is there, too. That's interesting. Apple has very tight control on the watch interface. Apple owns the knob and the button; you can't use those. You must use white text on a black background. You can use only one font other than Apple's "San Francisco". Voice input is not a watch UI component; voice input appears to be reserved for talking to Apple's Siri.

kaolinite3• 11 years ago

With the launch of watchOS 2, developers are able to use voice input and the digital crown. Don't think they have access to the button.

julianozen• 11 years ago

Interesting that Apple displays the hit targets of the buttons with a border around it, despite the fact that standard iOS 7/8 UIButtons do not come with button outlines/fills by default. https://developer.apple.com/library/prerelease/ios/documenta...

I found this one of the more annoying changes in the iOS 7 redesign. Buttons and tap targets are incredibly difficult to recognize in certain places.

For instance, it is very hard to discern which of these text labels are buttons, and which are titles. http://images.techhive.com/images/article/2013/09/05-tell-me...

Or in the iOS start guide, several of the buttons, don't have large enough tap targets behind them making them annoyingly difficult to press http://screenshots.en.sftcdn.net/blog/en/2013/09/ios-7-welco...

alajarvela• 11 years ago

Pretty basic stuff, although Apple's examples aren't exactly the greatest ones. They break some of the rules themselves.

yAnonymous• 11 years ago

Design advice from Apple... no, thank you.

aesthetics1• 11 years ago

I feel like this is a poor attempt to try and craft some cohesion in the app store. Google has done a much better job of writing guidelines with their Google.com/design site, specifically the Material Design Guidelines[1]. In my opinion, Google has really shown that it has a stronger design sense than people give them credit for.

[1] https://www.google.com/design/spec/material-design/introduct...

UI Design Dos and Don'ts

Related Stories