Mobile User Experience Flashcards
What is responsive Web Design?
Responsive web design is an approach to web design and development whereby websites and web applications respond to a screen size of the device on which they’re being accessed.
The response includes layout changes, rearrangement of content, and in some cases selective display or hiding of content elements.
Using a responsive web design approach, you can optimize web pages to achieve great user experience on a range of devices, from smartphones to desktop.
What is Progressive Enhancement?
Scaling down websites according to the current device, selectively removing/adding functionality according to the device’s characteristics
What is Responsive Design?
Designers show content based on the browser space available. This allows consistency between what a site shows on a desktop and what it shows on a handheld device. Responsive design is the “traditional” option and remains the more popular approach to date.
Responsive Design - Pros
— Uniform & seamless = good UX.
— Abundance of templates to use.
— SEO friendly.
— Often easier to implement
Responsive Design - Cons
— Less screen size design control.
— Elements can move around
— Advertisements lost on screen.
— Longer mobile download times.
Principles for Responsive Design
- Fluid Grid Systems
- Fluid Image Use
- Media Queries
Responsive Design - Fluid Grid Systems
Absolute size won’t work.
Let’s see an example:
Developing for a maximum of 960 pixels but it is going to be displayed in 1280
- Target size/ context = relative size
- 960/1280 = 75%
Two column approach to your layout. The columns are intended to be of equal size with a margin of 20 pixels between them (making each column 470 pixels wide). We use the same formula again for the columns and the margin:
- 470/960 = 48.9% (for each column)
- 20/960 = 2.2% (for the margin)
Responsive Design - Fluid Images
The easiest way to handle fluid images (images that scale to fit their container) is using the CSS command:
* img { max-width: 100%;}
Heuristic Guide for Mobile Design
- Mobile interactions must be user-driven
- Mobile requires ease of use
- Avoid disruptions
- Mobile users are in constant contact with their devices
- Mobile users aim at continuous experiences beyond the device
- Mobile interactions may be part of a complex task
- Mobile users will trust peer-to-peer marketing the most
- Mobile users expect GPS to enhance their experiences
- Mobile may lead to a “dumb terminal” with further processing carried out elsewhere
What is Social Proof?
Social proof is based on the idea of normative social influence, which states that people will conform in order to be liked by, similar to, or accepted by the influencer (or society).
In short, social proof demonstrates that we are likely to converge on a course of action when others provide that action for us.
Why Social Proof in UX?
To deliver credibility:
If other people find a source useful or
credible – we are more likely to believe that source may be useful or credible for ourselves.
To promote adoption and/or acceptance:
Volumes of people subscribing to a Facebook page or Twitter feed can encourage others to do the same.
Think about Booking.
Level 1: 20 visitors stayed here.
Level 2: 3 visitors from UK stayed here.
Level 3: 3 visitors and 1 friend stayed here.
Advantages of a Mobile UX
- It is possible to provide specific needs at a specific time and place
- Can be accessed in almost anywhere
- Mobile development can be more cost effective
- More potential users (almost everyone has a smartphone)
- There is the opportunity to reach a much wider geographic area (in developing nations smartphones are often the only way for a user to access the internet).
User-Centered Mobile Design: Phases
- Analysis
- Design
- Evaluation
- Implementation
User-Centered Mobile Design: Phase 1. Analysis
Determine the goal of the product and the target audience. Look at the competitors, to support or disrupt.
User-Centered Mobile Design: Phase 2. Design
Based on the Analysis phase, should respond to the requirements gathered. Some mood boards and wireframes can be created.
User-Centered Mobile Design: Phase 3. Evaluation
Several methods can be applied: think aloud, eye tracking, observation, survey, etc.
User-Centered Mobile Design: Phase 4. Implementation
Finalise the highfidelity prototype until the product.