User-centred design

Ivano Malavolta
Gran Sasso Science Institute
Roadmap

User-Centered Design
The Elements of User Experience
Navigation Model







Wireframes
http://paznow.s3.amazonaws.com/User-Centred-Design.pdf

Good design?

The visual part of a design is
only the tip of the i...
A World without User-Centered Design… 

http://bit.ly/w1rYO1
What did we learn?
Definition of UCD (from Wikipedia)
User Centered-Design (UCD) is …


“a design philosophy and a process in which the needs,...
More formally…
UCD is a development cycle which takes into consideration
what users really need and makes adjustments by e...
UCD is Universal
UCD can be applied to all design practices that have the
aim to provide a good user experience




Ex. 
•...
UCD is a process
Designers have to:

1.  analyze and foresee how users are likely to use an
interface
2.  test the validit...
The UCD Process

http://paznow.s3.amazonaws.com/User-CentredDesign.pdf

Analysis &
Planning

Launch

These will be the
3 p...
Evaluation
Analysis & Planning
Concept
Design
Implementation & Launch
We will cover these steps later in this course…
Roadmap

User-Centered Design
The Elements of User Experience
Navigation Model







Wireframes
The User Experience 5 planes

design

concept
Strategy
Planning out the objectives 
and goals of the project
Product overview
User
•  business goals
•  user research
• ...
Personas
Invent fictional characters with their own story
Scope
Definition of requirements, functional
specifications, data sources, scenarios
•  Features of the app 
–  what does it...
Structure
Structural design of the information space

•  how the user moves through and makes sense of tasks and
informati...
Navigation models
They represent:
•  relationship of content to other content and
•  how the user travels through the info...
Skeleton
Designing how information is presented to
facilitate understanding

•  Interface Design
–  buttons, checkboxes, l...
Lo-fi Wireframes
•  Views + user interaction + navigation
–  a refinement of navigation models
Surface
The look and feel of the product

•  typography, colour palette, alignment, texture, etc.
•  HI-FI WIREFRAMES (clo...
Hi-fi Wireframes
Detailed, realistic wireframes
Prototypes
•  Wireframes cannot represent
complex interactions 

à prototyping
•  Different kinds of prototype
–  paper p...
free advertisement J

http://popapp.in/
Summary
Hi-fi wireframes
+ prototypes (if needed)
Lo-fi wireframes 
+ wayfinding info
Navigation model + choices
Scenarios (w...
Planes dependencies





Each plane depends on the planes below
Planes dependencies
Ripple effect. If you choose an option out-of-bounds, you have
to rethink lower options
Be elastic
Roadmap

User-Centered Design
The Elements of User Experience
Navigation Model







Wireframes
Symbology

We will use a basic symbology 
for diagramming information architecture
and interaction design concepts


Propo...
Information Architecture
It is about

•  Conceptual Structure
•  Organization of Content
It is NOT about navigation among ...
Interaction Design
It is about 
•  navigation among views
•  how the user flows through defined tasks
It is NOT about naviga...
Goal of the sitemap symbology
to describe at a high level the 
structure and flow of the user experience of a website or ap...
Audience
Project managers and Sponsors

–  to get a general sense of the project

Content Producers

–  to derive content ...
Sitemaps
They represent:
•  relationship of content to other content and
•  how the user travels through the information s...
Conceptual model



The system presents the user with paths
The user moves along these paths through actions
These actions...
Pages
Pages are the fundamental unit of presentation

they are also called views
not (necessarily) a unit of implementatio...
Files
Files are parcels of data without navigational properties
They are delivered to the user for use outside the app



...
Connectors
Relationships between elements are
depicted with simple lines


Arrows to convey directionality 

they indicate...
Conditional Connectors
It is used when a path may or may not be presented to the user
depending upon whether one or more c...
Continuations
Continuation points allow us to split our diagrams
Areas
They are used to identify a group of pages that share one or more
common attributes


ex. 
appearing in a pop-up win...
Iterative Areas
They are used to represent architectures that involve repeating
the same basic structure as it is applied ...
Conditional Areas
It is used when one or more conditions applies to a group of
pages

ex. 
access permissions






an out...
Flow areas
It encloses a sequence of steps that will appear repeatedly in
the diagram

ex. login procedure







They req...
Concurrent Set
It is used when a user action generates multiple simultaneous
results
Decision Point
It is used when a user action may generate one of a number of
results, and the system must make a decision ...
Conditional Branch
It is used when the system (not based on user action) must select
one path among a number of mutually e...
Conditional Selector
Same as conditional branch, but paths are not mutually exclusive
Cluster
Similar to conditional selector, system allows more than one path
for certain conditions
Roadmap

User-Centered Design
The Elements of User Experience
Navigation Model







Wireframes
Wireframes
Views + user interaction + navigation
Lo-Fi Wireframes
A Lo-Fi wireframe is built on the sitemap and has a focus on
–  the LAYOUT of the views
–  interaction wi...
Hi-Fi Wireframes
An Hi-Fi wireframe is a refinement of a lo-fi wireframe with a focus
on
–  how each view will appear in det...
References

Chapter 7 

http://jjg.net/ia/visvocab
Contact

Ivano Malavolta | 
Gran Sasso Science Institute
+ 39 380 70 21 600

iivanoo

ivano.malavolta@univaq.it

www.ivano...
Upcoming SlideShare
Loading in...5
×

User-centred design

978

Published on

User-Centered Design
The Elements of User Experience
Navigation Model
Wireframes

This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.

http://www.ivanomalavolta.com

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
978
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

User-centred design

  1. 1. User-centred design Ivano Malavolta Gran Sasso Science Institute
  2. 2. Roadmap User-Centered Design The Elements of User Experience Navigation Model Wireframes
  3. 3. http://paznow.s3.amazonaws.com/User-Centred-Design.pdf Good design? The visual part of a design is only the tip of the iceberg Foundation of a successful design: a usercentred design Process (UCD)
  4. 4. A World without User-Centered Design… http://bit.ly/w1rYO1
  5. 5. What did we learn?
  6. 6. 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”
  7. 7. 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 satisfied The result of this is a high level of usability, the design is: •  effective •  efficient •  engaging •  easy to learn
  8. 8. UCD is Universal UCD can be applied to all design practices that have the aim to provide a good user experience Ex. •  websites •  architecture •  magazines •  graphics •  …
  9. 9. UCD is a process Designers have to: 1.  analyze and foresee how users are likely to use an interface 2.  test the validity of their assumptions in real world tests with actual users
  10. 10. The UCD Process http://paznow.s3.amazonaws.com/User-CentredDesign.pdf Analysis & Planning Launch These will be the 3 parts of your project!
  11. 11. Evaluation
  12. 12. Analysis & Planning
  13. 13. Concept
  14. 14. Design
  15. 15. Implementation & Launch We will cover these steps later in this course…
  16. 16. Roadmap User-Centered Design The Elements of User Experience Navigation Model Wireframes
  17. 17. The User Experience 5 planes design concept
  18. 18. Strategy Planning out the objectives and goals of the project Product overview User •  business goals •  user research •  sketch product features –  needs & goals •  competitors –  segmentation –  no context •  PERSONAS
  19. 19. Personas Invent fictional characters with their own story
  20. 20. Scope Definition of requirements, functional specifications, data sources, scenarios •  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
  21. 21. 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 –  NAVIGATION MODEL
  22. 22. Navigation models They represent: •  relationship of content to other content and •  how the user travels through the information space
  23. 23. 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 –  low fidelity for preventing confusion of visual design concepts with information design concepts
  24. 24. Lo-fi Wireframes •  Views + user interaction + navigation –  a refinement of navigation models
  25. 25. Surface The look and feel of the product •  typography, colour palette, alignment, texture, etc. •  HI-FI WIREFRAMES (close to mockups) •  PROTOTYPES
  26. 26. Hi-fi Wireframes Detailed, realistic wireframes
  27. 27. Prototypes •  Wireframes cannot represent complex interactions à prototyping •  Different kinds of prototype –  paper prototype –  context prototype –  HTML prototype
  28. 28. free advertisement J http://popapp.in/
  29. 29. Summary Hi-fi wireframes + prototypes (if needed) Lo-fi wireframes + wayfinding info Navigation model + choices Scenarios (with ctx) + functionalities Product overview + objectives + Personas + competitors
  30. 30. Planes dependencies Each plane depends on the planes below
  31. 31. Planes dependencies Ripple effect. If you choose an option out-of-bounds, you have to rethink lower options
  32. 32. Be elastic
  33. 33. Roadmap User-Centered Design The Elements of User Experience Navigation Model Wireframes
  34. 34. Symbology We will use a basic symbology for diagramming information architecture and interaction design concepts Proposed by Jesse James Garrett he coined the term Ajax, by the way
  35. 35. Information Architecture It is about •  Conceptual Structure •  Organization of Content It is NOT about navigation among views
  36. 36. Interaction Design It is about •  navigation among views •  how the user flows through defined tasks It is NOT about navigation details buttons, checkboxes, pictures, etc… are not defined here, they are part of wireframes
  37. 37. Goal of the sitemap symbology to describe at a high level the structure and flow of the user experience of a website or app Features: •  Simple •  Tool-independent •  Small •  Self-contained the focus is on the macro-structure
  38. 38. Audience Project managers and Sponsors –  to get a general sense of the project Content Producers –  to derive content requirements Interface Designers –  to derive interface design requirements Technologists –  to derive functional requirements Information Architects –  to derive navigational and interface requirements
  39. 39. Sitemaps They represent: •  relationship of content to other content and •  how the user travels through the information space
  40. 40. Conceptual model The system presents the user with paths The user moves along these paths through actions These actions then cause the system to generate results
  41. 41. Pages Pages are the fundamental unit of presentation they are also called views not (necessarily) a unit of implementation one page in your diagram may correspond to multiple files Pages can be organized into a page stack A unique label can be associated to a page
  42. 42. Files Files are parcels of data without navigational properties They are delivered to the user for use outside the app Files can be organized into a file stack A unique label can be associated to a file
  43. 43. Connectors Relationships between elements are depicted with simple lines Arrows to convey directionality they indicate how the user will move through the system A crossbar on the opposite end of the arrow is used to prohibit upstream movement
  44. 44. Conditional Connectors It is used when a path may or may not be presented to the user depending upon whether one or more conditions are met
  45. 45. Continuations Continuation points allow us to split our diagrams
  46. 46. Areas They are used to identify a group of pages that share one or more common attributes ex. appearing in a pop-up window having some unique design treatment
  47. 47. Iterative Areas They are used to represent architectures that involve repeating the same basic structure as it is applied to a number of functionally identical information elements ex. a product catalog in which each product has a number of associated pages
  48. 48. Conditional Areas It is used when one or more conditions applies to a group of pages ex. access permissions an outgoing result is generated if the condition is not fulfilled
  49. 49. Flow areas It encloses a sequence of steps that will appear repeatedly in the diagram ex. login procedure They require the two special types of continuation points: entry points and exit points
  50. 50. Concurrent Set It is used when a user action generates multiple simultaneous results
  51. 51. Decision Point It is used when a user action may generate one of a number of results, and the system must make a decision about which result is to be presented
  52. 52. Conditional Branch It is used when the system (not based on user action) must select one path among a number of mutually exclusive options
  53. 53. Conditional Selector Same as conditional branch, but paths are not mutually exclusive
  54. 54. Cluster Similar to conditional selector, system allows more than one path for certain conditions
  55. 55. Roadmap User-Centered Design The Elements of User Experience Navigation Model Wireframes
  56. 56. Wireframes Views + user interaction + navigation
  57. 57. Lo-Fi Wireframes A Lo-Fi wireframe is built on the sitemap and has a focus on –  the LAYOUT of the views –  interaction with elements within the views Low fidelity for preventing confusion of visual design concepts with information design concepts
  58. 58. Hi-Fi Wireframes An Hi-Fi wireframe is a refinement of a lo-fi wireframe with a focus on –  how each view will appear in details –  sensory sensations of the user typography colour palette textures + everything about the look & feel
  59. 59. References Chapter 7 http://jjg.net/ia/visvocab
  60. 60. Contact Ivano Malavolta | Gran Sasso Science Institute + 39 380 70 21 600 iivanoo ivano.malavolta@univaq.it www.ivanomalavolta.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×