Hi Everyone,

I created a small design guide for creating application on the iPhone. Here it is, Enjoy.

-Kamran A.

Edward Tufte is world famous statistician and professor in the information design field in a video essay he present his viewpoint on the pluses and minus on the iPhone interface. It is a great run down of effectiveness of the iPhone design which everyone praises. Some specific that he mentions, He like the photo viewer except the grid line between the images are big, he like the web browser if only the navigation bar takes up less screen space, he call the stock market application to cartoonish but however he like the weather application as an elegant way to demo to friends. He feels for the most part the iPhone got a lot of information design right that other phone seem to lack. Check out the video its slow in loading but well worth the wait.

To Video

-Kamran

Let me initiate these posts by saying that any error included are most probably the result of my mistakes and not of the Evengelists from Apple. And if anyone has been offended in some way (I really hope this will not happen since I am writing about software development and not religion) I humbly apologize. Now, lets get started.

The first talk I attended was performed by a User Experience Evangelist at Apple, Mr. Eric Hope.

All the talks at Tech Talk were very focused and intensive (compressing the subject of interaction design on the iPhone to one hour naturally leads to this). Mr. Hope immediately started of by presenting the 10 essentials of interface design, so here it goes:

1. Elegant solution – Your application needs to solve a specific problem or a set of problems for the user. Start of by pinpointing a problem and then move on the implementation and what features it will contain. Many developers move in the other direction — starting of with an idea about what cool features they want to include in their app. The users are not going to come back to your app for a cool animation.
2. Essential style – Finding which style your application belongs to can help you in making the right design decisions. Your application can probably be quartered into one of these groups:
   • Serious – Use minimal graphics, metaphors and keep the alignment clean. These apps are focused on the data so you don’t want to irritate the user with a lot of animations. E.g. Mail app.
   • Fun - These kind of apps focus on productivity and being graphically rich though still utilizing a simple information hierarchy.
   • Fun entertainment – This category is mainly populated by games; graphically intensive, no boring tables and full screen. Remember to let the user get to the game in as few taps as possible.
   • Serious entertainment - Moderately graphical, not excessively hierarchical with a focus on content consumption. E.g. Classics.
   • Utilities - A utility is also characterized by being graphically rich and focused on the main function. The UI should be readable from ~1.5m away, also try to use the “flip for settings” metaphor. E.g. Weather.
3. Great usability – Your application needs to be built on a solid hierarchy, a linear flow is usually what is best suited. Build it by the “one door to one room”-principle, this states that there should only be one way to enter a view. If the flow of the application is to complex the user won’t feel she has the ability to mentally map it out. In addition one thing many developers forget is to build their UI with finger sized targets, this translates to ~44×44 pixels for buttons, links and such.
4. Gorgeous app icon – Mr. Hope really stressed the importance of having an attractive icon. The icon is the first and last visual impression of your application (because of the shrinking animation being shown when an app quits). It is also the primary attractor in App Store, apps are made and broken from their icon. The human mind parses shapes first, so use a silhouette  without any text. The icon should be so rich in detail it can be printed as a poster and put on your wall. =)
5. High fidelity UI – Apple has been so kind to compress all their knowledge about UIs to a single document called the HIG (Human Interface Guidelines), both and Eric warmly recommend it. By conforming to iPhone-like behavior and looks you meet a level of standard. As a developer you can stand on the shoulders of others while the user will be able to feel at home using your interface. This is of course a trade-of when wanting to build something unique.Mr. Hope also emphasized how much there is to gain by involving the client/end user in the beginning of the design process. Creating a paper prototype for every screen will help you to avoid those costly cavities later on. There is also a cheap way of increasing the perceived value of your application; use rich materials like wood, leather and glass. Employing tactile design by using real things ad a model for your graphical objects you can enrich the user experience. E.g. The compass app.

   One fundamental point, that for some could come of as obvious, is that you WILL need a designer helping you build that app. His exact words were: “Hire, befriend or become a designer!”. I believe the last option will be the cheapest…

6. Dynamic content – This was THE single most important guideline of them all.
   iPhone users consume the data available in their apps then they throw them away. In order to get you user to regularly revisit you app it will need a “pulse”. Create a possibility for the users to share and/or generate new data. People love people, interconnectedness is the key. Facebook has a great API available for iPhone integration.

    

   People loves freshness and improvement! Don’t write “Bug fixes” in the update description of your app, take your time and try to “sell” your app again. By making available more content through in-app purchase there no need to release another app as you had to do before. But be detailed and transparent in your description about what the user will get. As the Swedish proverb says: “Ärlighet varar längst!” =)

7. Animation - Animation could help in increasing the perceived value, they could also (when done right) help to minimize graphical feedback to the user. E.g. instead of flashing an Alert in the face of the user when a podcast has been selected, the small icon flies to you Downloads-tab and the download begins.
8. Sound - Mr. Hope describes sound as the forgotten frontier. Unfortunately it is not present in many apps even though it could help in reducing visual noise and increase the value of the app. As with any feature it could be abused, always obey and respect the silent switch. Also remember that it needs to be symmetrical, if you play a sound when you expand a list you also need a sound when it contracts.
9. Polish – is not only a country in Europe! The details are as important as your main features. It only takes a small irritation to loose an otherwise happy user.Young iPhone are more likely to interact with their device using their thumbs, therefore implementing landscape mode could be wise if they are part of your expected population. There is no reason not to create a spotlight and settings icon, this should be 29×29 pixels and will take around 5 min of your time. The same argument holds true for Copy+Paste & Undo+Redo, even though it probably will take more than a few minutes to implement.
10. Application Definition Statement - As stated before, avoid developing from a long list of features. Try to find what is unique with your app.
    • What are your differentiators?
    • What problem are you trying to solve for the user?
    • Who are your audience? This really needs to be super focused, “laser precise!”.

    There is a mantra that could help you in finding your definition statement: “Pick the few features most frequently used, by the majority of your users, most appropriate for the mobile context.”

Remember to read through the HIG, it is loaded with tips for the interface designer as well as the developer.

Lastly I want to emphasize that any error expressed in this post most likely belongs to me, while any bit of knowledge can be credited to Eric Hope.

Stay tuned for part II; “In App Purchase by Mark Malone”.

Die neuesten Sprit-Spar-Technologien der Autoindustrie nützen alles nichts, wenn die Fahrer weiterhin mit dem Bleifuß unterwegs sind. Deshalb versuchen jetzt verschiedene Autohersteller mit innovativen Cockpit-Anzeigen Fahrer zum Sparen zu erziehen. Im Honda Insight kann man durch einen sparsamen Fahrstil Punkte sammeln und erhält dafür nach der Fahrt eine Belohnung in Form eines kleinen animierten Bäumchens. Beim Mini-Roadster flattern umso mehr Schmetterlinge über das Display, umso sparsamer man fährt.

Scheint doch auch eine interessante Aufgabe für Mediendesigner zu sein. Wie kann man Fahrer mit einem virtuellen Belohnungssystem zum sparsamen Fahren ermuntern?

Quelle: http://www.spiegel.de/auto/aktuell/0,1518,662460,00.html

…that the folks over at OpenOffice have concentrated so much on mimicking interfaces rather than trying to come up with their own interface.

If this is the best that can be achieved, I’m not surprised that OpenOffice takes longer to launch and gets uglier with each iteration. This is not interface design. It reminds me of the Kill-o-Zap gun from Hitch Hikers Guide to the Galaxy, which was described thusly in the book:

The designer of the gun had clearly not been instructed to beat about the bush. ‘Make it evil,’ he’d been told. “Make it totally clear that this gun has a right end and a wrong end. Make it totally clear to anyone standing at the wrong end that things are going badly for them. If that means sticking all sort of spikes and prongs and blackened bits all over it then so be it. This is not a gun for hanging over the fireplace or sticking in the umbrella stand, it is a gun for going out and making people miserable with.’

I keep hoping this is a joke, but I can’t see anything that suggests it’s anything other than something serious. It’s not a mouse – it’s an obscenity of undesign.

Fabulous example of making video gameplay accessible to younger children, the Wiimote is place inside a stuffed animal. Excellent gameplay and very cute graphics, plus the physical interaction is so much more enjoyable for small children than pushing buttons. The video is a bit off production wise (change that kid!). Plus I would design the stuffed animal to swallow the Wiimote instead… What were the designers thinking (or not thinking)… But the cuddling, jumping on springs, pin collection, etc. make up for that.

The game is made with Virtools technology, my old professional stomping grounds, so I’m especially proud.

I have been creating online tutorials for designers for Graphics.com/learning for about a year now. Now merged with Media Bistro, we provide a high-quality on-demand instruction for the serious designer. Whether you are new on the scene or a seasoned graphic design professional, I create tutorials that are designed to be easy, fun, and a delight for the eyes.

My topics tend to be on the general subjects of good design principles, and practices, online media, and creative inspiration. You can view the introductions to each video; to see the entire show, you must be a subscriber to their service. It is a good deal for the price. My viewers tend to be either individual subscribers or employees at a larger firm that buys the subscription as an ongoing educational tool for their employees.

Check them out here or browse below.

Dress for Success with Typography (24:51)

Aliyah Marr showcases her favorite websites that have accomplished masterful messaging with typography. Ranging from blogs to brand sites, Aliyah’s faves will inspire you with their creativity,…

more details

Worldwide Comedy Club (29:19)

Aliyah Marr’s latest inspirational tutorial focuses on the power of humor as a design tool. Her diverse array of hilarious examples drawn from the web includes text-only sites, prime-time TV spots,…
more details

World Wide Fantasyland Studios (28:35)

Today’s top online designers are employing video, animation, social networking, and ingenious illustration to transform websites into fantasy spaces, and promotion into entertainment. Aliyah Marr…

more details

Designers With Double Lives (28:15)

Aliyah Marr profiles four professional designers who spend their “off hours” on creative projects–;painting, photography, short experimental movies–;that end up informing their design work in…
more details

Fishing for Inspiration? (27:10)

Aliyah Marr reels in a whopping netful of free online inspirational resources for designers. Ranging from archival trips through design history to cutting-edge displays of Flash wizardry, Aliyah’s…
more details

Smashing Your Creative Blocks (22:38)

Because professional designers don’t have the time to wait for inspiration, Aliyah Marr provides a set of practical techniques that you can use to jump-start your creativity when the ideas just…
more details

What Drives Interactive Design? (25:43)

Aliyah Marr presents an overview of the various ways in which a website can engage the user. She likens web design to driving a stick shift, with the five gears corresponding to levels of intricacy…

more details

Self-Promotion for Designers (28:27)

Self-promotion is a necessity for designers contending with today’s challenging economic climate. Unfortunately, designers often view self-promotion as an impossibly complex, expensive, and…

more details

Boosting Sales Through Effective Web Design (27:46)

Designer and author Aliyah Marr answers the question, “How do you design a website that sells?” As Aliyah points out, it’s all about how web design attracts, maintains, and directs the attention of…
more details

This from the recent AskBobRankin Geekly Update for 28 October 2009:

“The Rolltop computer is one of the coolest gadgets I’ve seen in a long time. It’s a laptop that literally rolls up like a newspaper, and unrolls into either a 17-inch flat screen or a tablet configuration. There’s just one problem, it only exists as a design concept. But the video is worth a look.”

Nuts and Bolts Editor’s Note:  Although just a “concept”, it is certainly an intriguing one!  Enjoy!  Getting to the video is a bit awkward, but click on Rolltop link above, then the link at the bottom of the resulting screen and be patient while the cookie displays!

the verizon/moto/android ‘idon’t’ ad attacking iphone misses the mark for me.

you clearly don’t get why ilove my iphone – revolutionize a category through product and interface design and imight learn to love you too:

Excellent Font Library, mostly free for personal use

http://www.dafont.com/

The "findmore jcp interactive store" smart fixture. Its 52-in. touchscreen runs an application that
allows shoppers to scan an item to learn about the item's features, colors, sizes and even washing
instructions, and that information can be e-mailed.

CLIENT: JCPenny's
AGENCY: thebigspace
ROLE: Senior Art Director

click here to see


Future smart fixtures will have credit card readers attached, making them shopping kiosks controlled
remotely from Penney's headquarters. 



Multiple fixtures may be clustered into self-service check-outs that can be monitored by one associate,
similar to those found at supermarkets. 



A close up of the product catergory interface.



A close up of the ensemble products catergory.

]]>



http://sedefaydogan.wordpress.com/2009/10/15/corporate-identity-city-guide-website/
Thu, 15 Oct 2009 01:24:18 +0000
sed
http://sedefaydogan.wordpress.com/2009/10/15/corporate-identity-city-guide-website/

NFT (not for tourists)






NFT is an annually city guide for the US. There are different city guides for each city. It is obvious that it is not for the tourists, but for the citizens. However, I have to admit that it is attractive for the tourist too. It has also an iphone app.
I like NFT’s motto, because it is attractive for eveyone. The book and iphone app’s interface design seems simple and cool.
whatson.seeglasgow.com






seeglasgow.com is a touristic city guide website for Glasgow. You can search the events according to date and types. You can also make a reservation for  the flight to Glasgow, or hotels and restaurants in Glasgow.
I like the layout of the website, it is cool and userfriendly; and I like the dark colors that seperates it from the other city guide websites.
berininfo.com






This is a city guide website for Bern, Switzerland. Its design is simple and userfriendly. When you write date interval and the certain type of the event that you want, it gives you a list of the events that match your criteria. It has also an city guide ipod application that you can buy. This is a touristic city guide.
reutlingen.de






Reutlinger.de is similar to berninfo.com, but it is belong to government. Event search method is the same. It also gives information about the city and places to go. You can download the brochures of the events, too.
Its design is simple and I think it is boring.
]]>



http://nevoda.wordpress.com/2009/10/14/ux-presentations/
Wed, 14 Oct 2009 00:05:41 +0000
nevoda
http://nevoda.wordpress.com/2009/10/14/ux-presentations/

strong with the UX is this one (why UX and not UE – user experience?)




]]>



http://tutorsite.wordpress.com/2009/10/07/welcome-103epa/
Wed, 07 Oct 2009 21:49:24 +0000
MezP
http://tutorsite.wordpress.com/2009/10/07/welcome-103epa/

This module – The Principles of Interface Design – will begin on Thursday October 8th 2009 and will run every Thursday throughout term.

Room: ET313
Time: 10am – 2pm (some weeks there will be a lecture only from 10-11, followed by individual tutorials in the afternoon)
Resources: Will be posted on this blog AND on CUOnline
Lecture notes: Will be delivered via posts on this blog
The hand-in for this module is on the last Thursday of term 1 – 17th December 2009
Coursework/feedback: Will be returned on or before 21st January 2010

In the first week please read ALL the handouts and familiarise yourself with some of the NEW terminology you’ll be coming across. You will also find it helpful to take a look at A Brief History of the Internet – where you’ll find a number of very interesting links to help you with your research
]]>



http://jaykeefe.wordpress.com/2009/10/07/portfolio/
Wed, 07 Oct 2009 21:00:13 +0000
Jay
http://jaykeefe.wordpress.com/2009/10/07/portfolio/



http://edesk.pwp.blueyonder.co.uk
]]>



http://anthonyfranco.wordpress.com/2009/10/03/a-respectful-disagreement-with-some-good-friends/
Sun, 04 Oct 2009 00:16:33 +0000
anthonyfranco
http://anthonyfranco.wordpress.com/2009/10/03/a-respectful-disagreement-with-some-good-friends/





http://catalogsofbabes.wordpress.com/2009/10/03/whats-missing-from-this-picture/
Sat, 03 Oct 2009 14:13:41 +0000
Ivy
http://catalogsofbabes.wordpress.com/2009/10/03/whats-missing-from-this-picture/

Today I received the following email from the Long Beach Public Library. It’s a “pre-overdue notice,” which is apparently supposed to remind me that my materials are due soon.

For the love of Pete, can anyone tell me when my book is due, or are you really going to make me dig out my library card and log into my online account to look up the due date myself? I can’t even think of a remotely good reason not to include the actual due date in an automated “pre-overdue notice” reminder. I don’t know whether LBPL or Innovative are the ones to blame in this case, but it’s a serious FAIL.
]]>



http://claryb.wordpress.com/2009/10/01/nothing-flashy-just-good-solid-design/
Thu, 01 Oct 2009 07:35:51 +0000
claryb
http://claryb.wordpress.com/2009/10/01/nothing-flashy-just-good-solid-design/

“Where Children Find Hope,” a multimedia package produced by the Detroit Free Press, was a finalist in POYI’s Documentary Project of the Year. It features the stellar photography of Kathleen Galligan, exquisite video by Brian Kaufman, and some of the most poignant faces and voices you’ll encounter on the Web. The subject is Christ Child House, a foster care center that is home at any given time to some 30-plus boys. The material comprising the package was gathered over a three-year period in which the Michigan Department of Human Services granted the Free Press extraordinary access to Christ Child House and its foster residents.
This package is a good example of design that has been shaped by the subjects and content. The package’s most powerful and moving components—the beautiful, warmly lit brown and black faces of the boys—are allowed to dominate the screen. The subdued, earth-tone color scheme complements the skin tones, and the clean, simple design avoids flourishes that would detract from the images and their subjects.
The contents are neatly organized by medium and are navigated by way of a simple navbar with text buttons. An inverted tab in the header of the opening screen is flipped and reproduced at the bottom of the interior index pages, softening the otherwise boxy package.
There’s a good deal to learn from this package. First, pay attention to your images. Let them take the lead in the design. Second, simplicity allows what’s really important—your content—to shine. And third, a simple band of color top and/or bottom, can anchor your package to the screen. A few other pleasant surprises crop up, but all of the hushed, muted variety. For example, in a design dominated by warm complements, a contrasting sky-blue background cools down a couple of interior screens.
“Where Children Find Hope” is good multimedia journalism enhanced by good design.
]]>



http://dispositionaudit.wordpress.com/2009/10/03/classic-spaceman/
Sat, 03 Oct 2009 16:53:04 +0000
The Author
http://dispositionaudit.wordpress.com/2009/10/03/classic-spaceman/


]]>



http://dispositionaudit.wordpress.com/2009/09/26/5/
Sat, 26 Sep 2009 14:23:41 +0000
The Author
http://dispositionaudit.wordpress.com/2009/09/26/5/


]]>