Your SlideShare is downloading. ×
User-Centered Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

User-Centered Design

1,674
views

Published on

Mobile Applications Development - Lecture 3 …

Mobile Applications Development - Lecture 3

User-Centered Design

Information Architecture (sitemaps, wireframes, ...)

UI Design

This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

http://www.di.univaq.it/malavolta

Published in: Education, Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,674
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
141
Comments
0
Likes
2
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. User-centered Design Ivano Malavolta ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
  • 2. Roadmap• User-Centered Design• The Elements of User Experience
  • 3. Good Design? The visual part of a design is only the tip of the iceberghttp://paznow.s3.amazonaws.com/User-http://paznow.s3.amazonaws.com/User Foundation of a successful design: a user-centred design user-Centred-Design.pdf Process (UCD)
  • 4. A World without User-Centered Design…http://bit.ly/w1rYO1
  • 5. What did we learned?
  • 6. Intuition behind UCD Let’s focus on the USER!
  • 7. Definition of UCD (from Wikipedia)User Centered-Design (UCD) is …“a design philosophy and a process in which the needs, wants, and limitations of the end user of an interface or document are given extensive attention at each stage of the design process”
  • 8. More formally…UCD is a development cycle which takes into consideration what users really need and makes adjustments by exploring, testing and tuning the design until these needs are satisfiedThe result of this is a high level of usability, the design is: usability• effective• efficient• engaging• easy to learn
  • 9. UCD is UniversalUCD can be applied to all design practices that have the aim to provide a good user experienceEx.• websites• architecture• magazines• graphics• …
  • 10. UCD is a processDesigners have to:1. analyze and foresee how users are likely to use an interface2. test the validity of their assumptions in real world tests with actual users
  • 11. http://paznow.s3.amazonaws.com/Userhttp://paznow.s3.amazonaws.com/User-Centred-Design.pdf Planning Analysis & The UCD Process project! 3 parts of your These will be the Launch
  • 12. Evaluation
  • 13. Analysis & Planning
  • 14. Concept
  • 15. Design
  • 16. Implementation & LaunchWe will cover these steps later in this course…
  • 17. Roadmap• User-centered Design• The Elements of User Experience
  • 18. The User Experience 5 planesdesignconcept
  • 19. Planes dependenciesEach plane depends on the planes below
  • 20. Planes dependenciesRipple effect. If you choose an option out-of-bounds, effect you have to rethink lower options
  • 21. Be elastic!
  • 22. Strategy Planning out the objectives and goals of the projectProduct overview User• business goals • user research• sketch product features – needs & goals• competitors – segmentation – no context • PERSONAS
  • 23. PersonasInvent fictional characters with their own story
  • 24. Scope Definition of scope, user needs, requirements, functional specifications• Features of the app – what does it do• Prioritized Requirements – constraints, rules, etc.• Type of managed content – how does it manage text, video, audio – data provenance (external API, web service, DB …)• Scenarios (using personas) – describe how personas may interact with the app
  • 25. Structure Structural design of the information space• how the user moves through and makes sense of tasks and information – information architecture • views definition and content nomenclature – interaction design • navigation among views – SITEMAP
  • 26. SitemapsThey represent:• relationship of content to other content and• how the user travels through the information space
  • 27. Skeleton Designing how information is presented to facilitate understanding• Interface Design – buttons, checkboxes, lists, etc.• Navigation Design – how the user travels among views• Information Design – how to arrange and group info + wayfinding• LO-FI WIREFRAMES LO- – low fidelity for preventing confusion of visual design concepts with information design concepts
  • 28. Lo-fi Wireframes• Views + user interaction + navigation – a refinement of sitemaps
  • 29. Surface The look and feel of the product• typography, colour palette, alignment, texture, layouts, etc.• HI-FI WIREFRAMES (close to mockups) HI-• PROTOTYPES
  • 30. Hi-fi Wireframes• Detailed, realistic wireframes
  • 31. Prototypes• Wireframes cannot represent complex interactions prototyping• Different kinds of prototype – paper prototype – context prototype – HTML prototype
  • 32. Summary Hi-fi wireframes + prototypes (if needed) Lo-fi wireframes + wayfinding infoSitemap + content nomenclature Scenarios (with ctx) + Reqs + functionalities + data prov.Product overview + objectives+ Personas + competitors
  • 33. References Chapter 7(until page 94)