• Save
Ui best practices
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Ui best practices

  • 1,997 views
Uploaded on

Principles ...

Principles

KISS.
Be clear and specific in what an option will achieve: for example, use verbs that indicate the action that will follow on a choice (see: Impl. 1).
Use obvious default actions appropriate to what the user needs/wants to achieve.
Fit the appearance and behavior of the UI to the environment/process/audience: stand-alone application, web-page, portable, scientific analysis, flash-game, professionals/children, ...
Reduce the learning curve of a new user.
Rather than disabling or hiding options, consider giving a helpful message where the user can have alternatives, but only where those alternatives exist. If no alternatives are available, its better to disable the option - which visually then states that the option is not available - do not hide the unavailable options, rather explain in a mouse-over popup why it is disabled.
Stay consistent and conform to practices, and placement of controls, as is implemented in widely-used successful applications.
Lead the expectations of the user and let your program behave according to those expectations.
Stick to the vocabulary and knowledge of the user and do not use programmer/implementation terminology.
Follow basic design principles: contrast (obviousness), repetition (consistency), alignment (appearance), and proximity (grouping).

Implementation

(See answer by paiNie) "Try to use verbs in your dialog boxes."
Allow/implement undo and redo.

References

Windows Vista User Experience Guidelines [http://msdn.microsoft.com/en-us/library/aa511258.aspx]
Dutch websites - "Drempelvrij" guidelines [http://www.drempelvrij.nl/richtlijnen]
Web Content Accessibility Guidelines (WCAG 1.0) [http://www.w3.org/TR/WCAG10/]
Consistence [http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0385267746]
Don't make me Think [http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pdbbssr_1?ie=UTF8&s=books&qid=1221726383&sr=8-1]
Be powerful and simple [http://msdn.microsoft.com/en-us/library/aa511332.aspx]
Gestalt design laws [http://www.squidoo.com/gestaltlaws]

More in: Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,997
On Slideshare
1,997
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. UI research anddevelopment BestPractices
  • 2. Good vs Bad UIApplication designWhat not - sluggish, ugly, busy, Frustrating or boring.User Interface Design Or Usability Or Visual Design Or Performance != Good UIUser Interface Design + Usability + Visual Design + Performance = Good UI Users’ perceptions of the usefulness, usability, and desirability of a Web application based upon the sum of all their direct and indirect interactions with it.
  • 3. Useful, Usable, and Desirable Useful: Can users achieve their goals? Usable: How easily can users achieve their goals? Desirable: Does the site appeal to the users’ emotions? factors – ( imagery, language, aesthetics, fun )
  • 4. 4 Mantras to Remember1. Become your users to know how to design for them.2. Design first to avoid leaving user experience to chance.3. Trust no one — test to make certain your users are happy.4. Inject user experience design into your software development life-cycle (SDLC) process.
  • 5. Become your users Do’s Don’ts• Listen to their needs. • Don’t assume that developers• Observe them in their natural habitat. already understand the user.• Create personas. • Don’t just listen; observe.• Empathize with them. • Don’t confuse business stakeholders with users. • Don’t confuse requirements gathering with user research.
  • 6. Become your usersThe first step in designing a great user experience is to deeply understand your users — their needs, wants, hopes, dreams, aspirations,attitudes, and goals relative to the project at hand.Many application development and research professionals make the mistake of thinking that understanding the user is just aboutrequirements gathering or observing user reactions to a demo. But to get inside their heads and find out what your users will really find useful, usable, and desirable.Do’sListen to their needs: Observe them in their natural habitat observe the environment and context in which the userusers are the real people who will use your Web site performs the tasksInterviewing them directly is the best way of understanding their needs Because your user experience design must fit into the total context in which the user is using your application.
  • 7. Become your usersCreate personas Empathize with them. Take a walk in their shoes — to feel their pain and their joy and truly understand them What motivated her to use the applications? What was she thinking? What tasks did she want to perform? How easy was it to do them? What other choices does she have for achieving her goals?Give the persona a real soundingname and a face (a stock photo will why did she choose your application?do), and write a description of him or What upsets them?her that includes details youuncovered during your user research. How do they make final decisions?Do a mental walkthrough of the user waking upin the morning, going through her day, and, atsome point, using your application
  • 8. Become your usersDon’tsDon’t just listen; observe.If I had asked people what they wanted, they would have Application development process starts with requirements gathering andsaid ‘faster horses. then proceeds to design and development.Listening is only one way to understand your customers. But often the requirements gathering focuses only on the needs of the business and not the needs of the users.Important to observe them and empathize with them Understand their overarching goals and think more Make sure that your business analysts understand the difference between creatively about how to help them achieve those goals. traditional business requirements and user research.
  • 9. Design first Do’s Don’ts• Serve business goals by serving user •Don’t forget to design for allgoals. aspects of the user experience.• Find and grow design talent. • Don’t think tools can design for• Design for change. you.• Know your constraints. • Don’t ignore the user research.• Design for differences. • Don’t lock into a design too• Borrow inspiration from other designs. soon.• Start with low-fidelity prototypes. • Don’t rush to write code.
  • 10. Design first Design is part art because you have to find that differentiating je ne sais quoi that attracts customers.Design is also part science because there is research on, • what has worked or failed in the past • Compatible with present technological advancements • Scalable and adaptable to the predicted future technological advancementsServe business goals by serving user goalsThe user experience provided by your Website exists in the broader context of your business needs.Well-designed sites help users do something that furthers the goals of the organization.For example Linkden, FaceBook, and Youtube:Achieves the business goal of showing potential advertisers Website usage data and focusing options proving that fansare highly committed, which means that ads on the show will be worth more.
  • 11. Design firstDesign for change.Users’ expectations of what is useful, usable, and desirable can change depending upon a number of factors, includingcultural shifts, economic realities, competitive offers, and technology.Application developers should therefore design for change by getting insight into how your personas will evolve in thefuture.Do this by coming up with a couple of future scenarios based upon trends that are in context such as competitors’announced intentions, technology adoption cycles, cultural shifts, and economic cycles.Then brainstorm about how each of your personas will react to each of these future states.Now evaluate how well your current user experience design can evolve to each of these future visions.When you do this, be sure to evaluate the ability of your technical architecture to evolve as well.
  • 12. Design firstKnow your constraintsMake sure that we know our constraints before beginning the design process.Like everyone else, designers are constrained by time and money but those are not their only constraints.They may also be constrained by the need to fit their work into an existing site that has consistent internal conventionsfor elements like menu placement and link format.Technical constraints like the screen size for a mobile application or an underlying technical architecture that preventsyou from supporting certain features cost-effectively or performing adequately.
  • 13. Design firstDesign for differencesIt is likely that your user research uncovered the need to design for more than one persona.That doesn’t mean that each of the user segments these personas represent are equally important to your business.For example, you may want to put more design effort on satisfying users that are the most profitable or users that havethe most potential for increasing revenue.You may want to focus on attracting a new set of prospective users(new persona) to your site.Once you’ve assigned a relative importance to each persona, you can use a tools to determine the most importantcontent, features, and functions to include in your site.
  • 14. Design firstBorrow inspiration from other designs Design almost never starts from scratch. Most firms periodically review competitors’ sites to see what they’re doing. More forward-thinking companies also look outside their industry to find design ideas that will differentiate them among best-of-breed sites like nytimes.com in media, amazon.com in shopping, netflix.com in entertainment, and fidelity.com in financial services. New design ideas can also be inspired by new technology. For example, application developers can see designs based on innovative uses of Flash at the Fidelity Labs site and an innovative interactive transcript feature used with videos at ted.com.
  • 15. Design firstLet us know what in what we lag?UX design talent requires Visual design Interaction design Usability testing To create a user experience that is useful, usable, and desirable, we’ll need all these skill sets in our finger tips.
  • 16. Trust no one — test Do’s Don’ts• Settle irreconcilable differences • Don’t just test for usability.through testing. • Don’t forget to test for reliability.• Take a shortcut with expert reviews. • Don’t forget to test for security.• Test continuously.
  • 17. Inject user experience design-SDLC Do’s Don’ts• Educate everyone on the team about • Don’t make user experiencewhat UX is and why it is important. design prohibitively expensive.• Find a leader who will elevate and • Don’t just throw design overdrive UX design. the wall.• Prioritize initial efforts on projects • Don’t fall back to old ways.where you can make a big impact.• Provide incentives to applicationdevelopment teams.• Transform your app dev process toinclude UX design.
  • 18. Web Application Website
  • 19. Other Do’s - RESULTS• Use immersive development methodology.• Empower designers and even end users to help you develop.RESULTS to achieve:Three Areas Of Loyalty Willingness to buy more Reluctance to switch Likelihood to recommend
  • 20. Contact UsTel: +86 10 8231 1996Fax: +86 10 8231 1101http: //www.udesignlab.comEmail: info@udesignlab.comAddress: Bai Yan Building 1302, No.238 North 4th Ring Middle Road Beijing 100191, China