The iOS Gray Pinstriped Background
![]()
Short, snark-free, tl;dr version:
The gray pinstriped background is present in the UITableViewStyleGrouped UITableView and is most commonly seen within the Settings App on the iPhone. The style looks outdated and drab. Even Apple strays away from it in their own apps, especially on the iPad where not a single Apple made app uses it.
Apple needs to give it a facelift in its next major iOS release.
Longer (sarcastic) version:
O people of the Internet! With great efforts, I have managed to come up with 3 alternatives to the unimaginably beautiful lined background found in iOS.
Behold! First, from the most popular operating system in the world, the wallpaper that everyone has a secret crush on. ![]()
Can’t get enough of our cute friends from Rovio? Everyone could always, and I mean absolutely always, use more Angry Birds in their life.
![]()
Ah! And finally, the infamous, iOS linen pattern. Found all over iOS. It’s on the multi-task bar. It’s on the notifications pane. Why not go for the full hat-trick?
![]()
UPDATE: Multiple people have told me they thought I was serious with these suggestions. Oh dear. We’ve put men on the moon but we still haven’t found a way to show sarcasm in writing. Perhaps I should have put the text of the whole article in italics? (I’m being sarcastic again.)
Super Mario World Camera Logic
A fantastic video by Shaun Inman describing the brilliant camera logic in Super Mario World. Nintendo has always been meticulous in its attention to detail. Camera logic doesn’t come ‘free’ and it takes a lot of hard work and talented people to get it right.
Most people wouldn’t think twice about details like these but they do make a huge difference.
The F-Pattern
One of my favourite usability studies. It’s something every web designer should read and put into consideration for their projects.
Summary:
Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.F for fast. That’s how users read your precious content. In a few seconds, their eyes move at amazing speeds across your website’s words in a pattern that’s very different from what you learned in school.
In our new eyetracking study, we recorded how 232 users looked at thousands of Web pages. We found that users’ main reading behavior was fairly consistent across many different sites and tasks. This dominant reading pattern looks somewhat like an F and has the following three components:
Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.
What does this mean? How does it affect your design?
Implications of the F Pattern
The F pattern’s implications for Web design are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content:
(1) Users won’t read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won’t.
(2) The first two paragraphs must state the most important information. There’s some hope that users will actually read this material, though they’ll probably read more of the first paragraph than the second.
(3) Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They’ll read the third word on a line much less often than the first two words.
The Golden Ratio in 2Do
Gorgeous use of the Golden Ratio.