Designing for the iPhone
Recently, one of our clients asked us to design a website layout specifically for the iPhone. LevelTen has created one iPhone specific web application in our past, but we have little experience with best practices. This prompted me to research some iPhone web applications and find out what makes a good web app vs. a bad web app. These are my findings:
(The web apps I list below can be viewed on an iPhone, if you have one, but may also be viewed on this iPhone emulator on the web.)
- Simplicity is Key
- Bigger is Better
- Optimize Call to Actions
- Don't Make the User Login
Popurls does a good job of keeping things simple. Popular Now and Popular Today head the list. Upon click, it takes you to a list of headings from news stories. Take another click and it links you to the story. Easy peasy.
ScoreMobile also keeps things nice and simple by showing 3 category buttons NBA, MLB and NHL and placing only the date, city, time, and scores on the page.
A bad example of keeping things simple can be seen with Casting.mobi. Their homepage is cluttered and busy. I did not know what to do when I first got to the page. I clicked on "Search Talents" and was brought to a ridiculously long page filled with text fields that I'm not sure who would fill out.
I noticed that several of what I would consider good apps had large hotspots around links, large buttons, and large text. All of these are easy for the fingers. SmartBytes does a good job by providing big hotspots around its menu items.
An important part of an iPhone web app is to include is a call to action for relevant pages. Woman's Day Recipe Finder includes call to actions on all of their recipes. The buttons Save Recipe and Email Recipe are on every recipe page. The only downside is that the call to action buttons are located at the very bottom of the recipe. This means you have to scroll through all of the ingredients, directions, and nutrition facts just to save it or email the recipe to your friend.
I want to interact with a site right away, and I'm sure most users want to do the same. Sites like 43 actions, who have only a login screen on the home page, leave much to offer. Weight Date Weight Tracker does it a little bit better. It has a login on it's home screen, but allows the user to make a username and password right there. It doesn't require you to click Sign up or any of the sort. Even better is the Foodist Colony, where it has the login on the home page, along with other links to browse restaurants, etc. WebChattr allows the user to create a username and start chatting right away.
In summary, in designing for the iphone, keep things simple, big, quick, and easy. Give the user content that's simple to navigate, big enough to touch, quick to act upon, and easy to use.
- Rachel's blog
- Login or register to post comments
An Abercrombie And Fitch
An Abercrombie And Fitch employee in northern California is alleging she was fired for refusing to remove her hijab, or headscarf marking her Muslim observance. Abercrombie pursuit of a homogeneous army of "perfect" employees appears to have snared it again!
Abercrombie Clothing to the AP, "the Council on Abercrombie UK Relations said Wednesday it filed an Equal Abercrombie London Opportunity Commission complaint on behalf of Hani Khan." Abercrombie Fitch says she was told she would be allowed to wear a Abercrombie Outlet, but a visiting district manager disputed that. She says she was fired when she refused to take it off.
In 2008, an Abercrombie And Fitch accused Abercrombie of refusing to hire her because her head scarf "didn't fit the chain's image." That lawsuit, filed last year, is still in progress.
Abercrombie in the company's serious on-the-ground sensitivity issues: Abercrombie Clothing to let a woman help her autistic sister try on Abercrombie UK, for which they were fined $115,264, and banishing an employee with a prosthetic arm from the store floor. That employee, Riam Dean, was awarded ￡8,000 for unlawful harassment, although the tribunal ruled that she hadn't suffered disability discrimination.
Abercrombie London has a well-documented mission of selling its idea of youthful physical perfection, Abercrombie Fitch the Bruce Weber ad campaigns to the employees that fit its ideal of American beauty. The company conceded that that ideal didn't include black, Abercrombie Outlet, and Asian employees in 2004 when it paid $40 million to employees and job applicants of those demographics to settle a class-action federal discrimination lawsuit. They had been accused of "engaging in recruiting and hiring practices that exclude minorities and adopting a virtually all-white marketing campaign."
ed hardy ed hardy
ed hardy clothing ed hardy clothing
ed hardy shop ed hardy shop
cheap ed hardy cheap ed hardy
ed hardy uk ed hardy uk
ed hardy sale ed hardy sale
ed hardy clothes ed hardy clothes
ed hardy outlet ed hardy outlet
ed hardy ed hardy
ed hardy clothing ed hardy clothing
ed hardy shop ed hardy shop
cheap ed hardy cheap ed hardy
ed hardy uk ed hardy uk
ed hardy sale ed hardy sale
ed hardy clothes ed hardy clothes
ed hardy outlet ed hardy outlet
Pingback
[...] Designing for iPhone (list of several websites with iPhone interfaces) [...]
Smart Ideas
I couldn't agree with you more. Our group has developed an site that was put together specifically for the iPhone and it flopped because we expected the client to login to proceed. When people hit your site with any PDA they want quick, simple and clean navigation.
good advice
Reading this post made me think about designing all websites in general. When doing so it is so important to view the layout in several browsers and formats to make sure everything is looking the way you want it to.
Any iPhone Developers Out There?
First of all, thank you calling out Foodist Colony as a good example in your post. I am the founder and it feels good when our hard work is recognized. We were in the same position in regards to our lack of best practice knowledge. We kept it simple just like you suggest and kept using the application until it felt right. It took us some time to find the optimal type size and button sizes that worked on this new device. Mouse clicks are one thing but "finger tip clicks" required us to tweak things several times until we felt it was right.
We are in the process of upgrading our application so it is native. If you know of any solid iPhone developers or if there are any reading this post, please contact me. Just email us at info at foodistcolony dot com
Thanks and great blog, just subscribed to the feed!
- David