User-Centered Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

User-Centered Design

on

  • 2,076 views

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

Statistics

Views

Total Views
2,076
Views on SlideShare
2,076
Embed Views
0

Actions

Likes
2
Downloads
125
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

User-Centered Design Presentation 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)