![Page 1: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/1.jpg)
Gran Sasso Science Institute
Ivano Malavolta
User experience
![Page 2: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/2.jpg)
The Elements of User Experience
Navigation Model
Wireframes
Roadmap
![Page 3: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/3.jpg)
concept
design
The User Experience 5 planes
![Page 4: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/4.jpg)
Product overview
• business goals
• sketch product features
• competitors
Planning out the objectives and goals of the project
User
• user research
– needs & goals
– segmentation
– no context
• PERSONAS
Strategy
![Page 5: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/5.jpg)
Invent fictional characters with their own story
Personas
![Page 6: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/6.jpg)
• 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
Definition of requirements, functional specifications, data sources, scenarios
Scope
![Page 7: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/7.jpg)
• how the user moves through and makes sense of tasks and information
– information architecture• views definition and CONTENT NOMENCLATURE
– interaction design
• navigation among views via a NAVIGATION MODEL
Structural design of the information space
Structure
![Page 8: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/8.jpg)
They represent:
• relationship of content to other content and
• how the user travels through the information space
Navigation models
![Page 9: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/9.jpg)
• Interface design– buttons, checkboxes, lists, etc.
• Detailed 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
Designing how information is presented to facilitate understanding
Skeleton
![Page 10: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/10.jpg)
• Views + user interaction + navigation
– a refinement of navigation models
Lo-fi Wireframes
![Page 11: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/11.jpg)
• typography, colour palette, alignment, texture, etc.
• HI-FI WIREFRAMES (close to mockups)
• PROTOTYPES
The look and feel of the product
Surface
![Page 12: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/12.jpg)
Detailed, realistic wireframes
Hi-fi Wireframes
![Page 13: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/13.jpg)
• Wireframes cannot representcomplex interactions
à prototyping
• Different kinds of prototype
– paper prototype
– context prototype
– HTML prototype
Prototypes
![Page 14: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/14.jpg)
http://popapp.in/
free advertisement J
![Page 15: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/15.jpg)
Product overview + objectives+ Personas + competitors
Scenarios (with ctx) + functionalities
Navigation model + data model
Lo-fi wireframes+ wayfinding info
Hi-fi wireframes+ prototypes (if needed)
Summary
![Page 16: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/16.jpg)
Ripple effect. If you choose an option out-of-bounds, you haveto rethink lower options
Planes dependencies
![Page 17: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/17.jpg)
Be elastic
![Page 18: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/18.jpg)
The Elements of User Experience
Navigation Model
Wireframes
Roadmap
![Page 19: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/19.jpg)
Symbology
We will use a basic symbology
for diagramming information architecture
and interaction design concepts
Proposed by Jesse James Garretthe coined the term Ajax, by the way
![Page 20: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/20.jpg)
Information Architecture
It is about
• Conceptual structure
• Organization of content
It is NOT about navigation among views
![Page 21: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/21.jpg)
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, theyare part of wireframes
![Page 22: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/22.jpg)
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
![Page 23: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/23.jpg)
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
![Page 24: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/24.jpg)
Sitemaps
Focus on:
• relationship of content to other content and
• how the user travels through the information space
![Page 25: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/25.jpg)
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
![Page 26: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/26.jpg)
Pages
Pages are the fundamental unit of presentationthey are also called views
not (necessarily) a unit of implementationone page in your diagram may correspond to multiple files
Pages can be organized into a page stack
Page stack: functionally identical pages with identical navigationaltreatment
![Page 27: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/27.jpg)
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
![Page 28: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/28.jpg)
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
![Page 29: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/29.jpg)
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
(11b) only company employees can have access to B
![Page 30: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/30.jpg)
Continuations
Continuation points allow us to split our diagrams
![Page 31: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/31.jpg)
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
![Page 32: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/32.jpg)
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
![Page 33: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/33.jpg)
Conditional Areas
It is used when one or more conditions apply to a group of pages
ex. access permissions
an outgoing result is generated if the condition is not fulfilled
![Page 34: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/34.jpg)
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
![Page 35: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/35.jpg)
Concurrent Set
It is used when a user action generates multiple simultaneous results
![Page 36: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/36.jpg)
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
(10a) correct credentials?
no yes
![Page 37: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/37.jpg)
Conditional Branch
It is used when the system (not based on user action) must select one path among a number of mutually exclusive options
Can you think about an example of this situation?
![Page 38: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/38.jpg)
Conditional Selector
Same as conditional branch, but paths are not mutually exclusive
![Page 39: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/39.jpg)
Cluster
Similar to conditional selector, system allows more than one path for certain conditions
![Page 40: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/40.jpg)
Example - Yahoo mail
http://boxesandarrows.com/files/banda/jjg_ymail_poster.pdf
Note: differently from this example, you will have a single page for each view of the app
![Page 41: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/41.jpg)
The Elements of User Experience
Navigation Model
Wireframes
Roadmap
![Page 42: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/42.jpg)
Wireframes
Views + user interaction + navigation
![Page 43: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/43.jpg)
Sitemap à lo-fi wireframe
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
![Page 44: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/44.jpg)
Sitemap à lo-fi wireframe
Sitemap page à wireframe view + interactions
Sitemap transition à link with gesture icon
Better doing it manually in an A3 sheet
Then translate it using a wireframing kit
e.g. http://graphicburger.com/app-wireframes-kit/
http://goo.gl/i5dxjk
![Page 45: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/45.jpg)
Example 1
http://uxkits.com/products/mobile-app-visual-flowchart
![Page 46: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/46.jpg)
Example 2
https://www.pinterest.com/pin/391742867560358518/
![Page 47: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/47.jpg)
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
![Page 48: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/48.jpg)
Useful resources
– www.mobiledesignpatterngallery.com
– pttrns.com– inspired-ui.com
– mobile-patterns.com
![Page 49: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/49.jpg)
Google material design guidelines
Google material design guidelines
http://www.google.com/design/spec/material-design
![Page 50: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/50.jpg)
Chapter 7 http://jjg.net/ia/visvocab
References
![Page 51: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/51.jpg)
Product overview + OBJECTIVES+ Personas + competitors
Scenarios (with ctx) + FEATURES
NAVIGATION MODEL+ DATA MODEL
LO-FI WIREFRAMES+ wayfinding info
HI-FI WIREFRAMES+ prototypes (if needed)
In your project
![Page 52: [2015/2016] User experience design of mobil apps](https://reader031.vdocuments.us/reader031/viewer/2022030219/5885d2781a28ab42028b6c8b/html5/thumbnails/52.jpg)
LAB
1. Create the sitemap of the Loveitaly app
– suggested tool: http://www.yworks.com/en/products/yfiles/yed/
2. Create a simple class diagram representing the data model of
the Loveitaly app
3. Sketch lo-fi wireframes of some views of the app