Downloaded 31 times
More Related Content
![Creating User Friendly Joomla! Websites and Forms [English]](https://cdn.slidesharecdn.com/ss_thumbnails/tpjab12usability-120521050559-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Tengoldenrules 100221091210-phpapp01[1]](https://cdn.slidesharecdn.com/ss_thumbnails/tengoldenrules-100221091210-phpapp011-120721054929-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Stand Out Apps
- 2. Stand-Out Apps: The UserExperience Is Key Jeremy Lyon, Manager, Interaction Design Adil Dhanani, Manager, UI Production April 24, 2010
- 3. What We’ll Cover Whatis design? 10 minutes What’s special about mobile design? 5 minutes How to employ design techniques 15 minutes Examples 15 minutes Q&A 15 minutes
- 4.
- 5.
- 6.
- 8.
- 9. Usefulnes s image courtesy SNAKPhotography http://www.flickr.com/photos/snakphotography/
- 10. Usability image courtesy TerryWha http://www.flickr.com/photos/terry_wha/
- 11. image courtesy SeanMcGrath http://www.flickr.com/photos/mcgraths/
- 12.
- 15. image courtesy RobShenk http://www.flickr.com/photos/rcsj/
- 16. image courtesy SeanMcGrath http://www.flickr.com/photos/mcgraths/
- 17.
- 18.
- 19. Tradeoffs image courtesy Hennaby Karen Horton http://www.flickr.com/photos/karenhorton/
- 20. What’s Different AboutMobile
- 22.
- 23. image courtesy PaulLowry http://www.flickr.com/photos/paul_lowry/
- 24.
- 25.
- 26.
- 27.
- 28. image courtesy HoriaVarlan http://www.flickr.com/photos/horiavarlan/
- 29. image courtesy NormanB. Leventhal Map Center http://www.flickr.com/photos/normanbleventhalmapcenter/
- 30. image courtesy TheShane H http://www.flickr.com/photos/shane-h/
- 31.
- 32. Consisten cy
- 33. Dominanc e
- 34.
- 35. image courtesy D’ArcyNorman http://www.flickr.com/photos/dnorman/
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. Books About Design •The Design of Everyday Things and Emotional Design by Donald A. Norman • Don’t Make Me Think by Steve Krug • The Inmates are Running The Asylum by Alan Cooper • Shaping Things and Tomorrow Now by Bruce Sterling
- 43. webOS Design Resources •Palm Human Interface Guidelines • Top Tips For Developing Great webOS Application Interfaces • Style Matters • All are available at developer.palm.com. Search for User Interface Guidelines
- 44.
Editor's Notes
- #3 •Who we are Jeremy -- Run interaction design at Palm -- Have been in this role since before webOS got its start Adil -- Manage production team at Palm -- Also been in this role from the beginning of webOS -- Background in Computer Engineering -- Started as an EPM, switched to design team as a UI developer
- #5 • What do you think?
- #6 • Some people think it’s about making things look better
- #7 • Some think it’s about putting people through a battery of tests in a laboratory
- #8 • Some think it’s about drawing a bunch of flowcharts • It’s all those things, and it’s about cultivating a state of mind • If you want to write applications that users are delighted by, you need to think like a designer
- #10 • Does your application do something people want to do, in a way that’s better than they can do otherwise? • This is table stakes • But from a designer’s perspective, this is about satisfying a user need • We looked at how people pursue their activities and realized that true multi-tasking, that is managing multiple tasks with permanence and in a physical natural way, didn’t exist in the mobile space
- #11 • Usability’s a big topic. I’ll call out a few components. • But there’s a framework to think about usability.
- #12 • Usability is a cognitive throughput problem • Like traffic on a freeway -- the more elements on a screen your brain has to process, the less it can • Key is to make the right trade offs between the functions you put in your application, and how you portray them. Here are some things to think about.
- #13 • Discoverability • How easy is it for people to pick up your application and know how to use it?
- #14 • Command buttons are easily discoverable • Back is easily discoverable on the iPhone, but it also makes for a more complex screen, and it adds that complexity to every single screen of an application that’s more than one level deep. • Back gesture is not easily discoverable on the Pre, but it’s very learnable.
- #15 • Learnability • How well does your design help users remember what to do? • Once you discover it, back gesture is easy to remember. It goes from right to left, which is associated with “back” in left to right reading languages. It’s physical, so portions of your brain that don’t require conscious thought are engaged. (When you walk, you don’t think about pick up foot, move it forward, put it down).
- #16 • Predictability • Will users get the same results when they perform the same actions? • Example: option lists. Every time you see a downward facing arrow, you can predict that there are a set of options that will appear on top of the screen and let you pick one • In general, you can count on the framework to provide predictability (and aid in discoverability)
- #17 • Simplicity • The less you have to think about, the easier it is to understand • Example: apply the 80/20 rule
- #18 • All adds up to reducing friction
- #19 • So, create a useful application that’s simple • A discoverable application that doesn’t put much on the screen • These ideas are often at odds with each other • Key is to make tradeoffs between one and the other • We’ll come back to this when we talk about techniques
- #20 • Mobile design is design, only more so. • Constraints are greater. • Trade offs are more important • Several characteristics unique to mobile design
- #21 • Smaller screen • There’s an upper limit on screen size before a device is no longer mobile • Smaller screens = less room = more complexity if you’re not careful • But also helps us to focus on what’s really important. 80/20 rule
- #22 • Smaller and less convenient input methods • Less opportunity to solicit user feedback
- #23 • More casual interaction, shorter bursts •People plan to sit down at their computers •People have their mobile device all the time, so they use it at odd moments •More interruptions
- #24 • Mobile design also offers opportunities over fixed devices • Always with you -- so you can build apps that enable frequent, rapid interactions • Contains your life, so operating systems that let you access that data open up all kinds of smart behaviors
- #25 •By no means is this comprehensive •At the end I'll present a list of resources I've found useful for more detail •Going to go in roughly chronological order, though much of this is back and forth
- #26 • Generate an idea • Be self-reflective about what you do • What do you wish you could do that you can't? •When do you find yourself cursing at a computer, and what about? •When do you find yourself asking, "wouldn't it be cool if?" •In other words, what itch do you want to invent a tool to scratch? • What about the people around you? Who would you like to help with a tool? • Write down your idea. • What problem are you trying to solve? • Who will use your application? • How will they measure success?
- #27 • Apply the reality filter •Its the intersection of reality and fantasy that's the fertile ground for software •Given what you know about software and hardware, what is possible?
- #28 • Research • What research won't do •Won't give you an idea •Won't tell you if your idea is a good one • What research will do •Set the context for your design •It’s like backstory for a writer •Help you discover the details that make a difference •Help you generate new ideas • Techniques •Talk to people •Place people in scenarios similar to what you're thinking about, and observe them •Show people your ideas, and ask them how they'd use it
- #29 • Map It • Draw a map of your application •What are the primary scenes users will interact with? •What do I mean by scene? Think of it as a scene in a play -- where the action takes place. A screen is a scene, so is a dashboard. •What can they do in them? •How will the scenes connect to each other? •Here's where a flow chart is helpful
- #30 • Sketch It • Start sketching the primary scenes • We’ll cover some primary visual design principles
- #31 • Less friction to balanced elements
- #32 • Repetitions of basic forms helps predictability
- #33 • Important objects should stand out
- #34 • Group related concepts •Enclosure •Placement •Color •Weight •Spacing
- #35 •Think about motion •Motion should reinforce the flow of your design • What happens when a user changes state? •webOS has built in transitions. Go in a level, we zoom in. Go out a level, we zoom out. •they’re only about 1/3 of a second each, but they really help users understand where they are in the hierarchy • But be appropriate. Too much eye candy in transitions can be distracting and reduce usability.
- #36 • Stand back and give it a dispassionate evaluation •Look at what you wrote down about your application. •Does it meet the needs you identified? •Does it satisfy your goals? • If not, why not? •Analyze what seems to work and what doesn't
- #37 • Cut out your sketches into the component screens •Or do it in Photoshop and use Ares to put it together • Find people to try it out on •Set the context -- what are they trying to do •Show them your sketches, ask what they would do? •Have them talk about what they're thinking •Don't help them when they get stuck •Write down your impressions immediately afterwards • Take your learnings and apply them back to the design
- #38 • Rinse and repeat until you’re satisfied
- #39 •Know when to stop • It's all about tradeoffs •Use your goals, audience and differentiation to decide what to trade off •Understand costs of discoverability versus usability, etc.
- #42 These resources are focused on the things that I found useful -- there’s a million more out there, just google it.