Mobile User Experience Flashcards

1
Q

What is responsive Web Design?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is Progressive Enhancement?

A

Scaling down websites according to the current device, selectively removing/adding functionality according to the device’s characteristics

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is Responsive Design?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Responsive Design - Pros

A

— Uniform & seamless = good UX.
— Abundance of templates to use.
— SEO friendly.
— Often easier to implement

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Responsive Design - Cons

A

— Less screen size design control.
— Elements can move around
— Advertisements lost on screen.
— Longer mobile download times.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Principles for Responsive Design

A
  • Fluid Grid Systems
  • Fluid Image Use
  • Media Queries
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Responsive Design - Fluid Grid Systems

A

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)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Responsive Design - Fluid Images

A

The easiest way to handle fluid images (images that scale to fit their container) is using the CSS command:
* img { max-width: 100%;}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Heuristic Guide for Mobile Design

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is Social Proof?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Why Social Proof in UX?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Advantages of a Mobile UX

A
  • 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).
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

User-Centered Mobile Design: Phases

A
  1. Analysis
  2. Design
  3. Evaluation
  4. Implementation
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

User-Centered Mobile Design: Phase 1. Analysis

A

Determine the goal of the product and the target audience. Look at the competitors, to support or disrupt.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

User-Centered Mobile Design: Phase 2. Design

A

Based on the Analysis phase, should respond to the requirements gathered. Some mood boards and wireframes can be created.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

User-Centered Mobile Design: Phase 3. Evaluation

A

Several methods can be applied: think aloud, eye tracking, observation, survey, etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

User-Centered Mobile Design: Phase 4. Implementation

A

Finalise the highfidelity prototype until the product.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Content is King

A
  • If content is king, then design needs to be carried out with delivering that content in mind.
  • Develop key content before you begin design work.
19
Q

Functions for Mobile

A
  • Keep the user in the picture. Inform the user about what to expect
  • Pay attention to the detail. Aim at a seamless experiences to achieve a successful product.
  • Watch the interface. Users are all thumbs, literally, on smartphones. Can your tasks be easily completed with someone’s thumbs? No? Then rethink them.
  • Keep things intuitive. This is back to the thumbs issue really – keep buttons, tabs, boxes, etc. to a minimum and keep content easy to access and navigate.
  • Keep controls consistent and at the bottom. This lets the user focus on the content and manipulate it as they need to.
  • Reduce user input where necessary. Pay attention to whether auto-correct is a help or hindrance on the device for your tasks. Make sure that you help the user pick the right keyboard to get the job done. Don’t forget to support a landscape orientation – particularly if you want a lot of typing done. Think about providing an orientation lock to make this easy.
20
Q

Navigation for Mobile

A
  • None at all. If you can deliver all information in one screen.
  • Simple tabs. Break content consistently in several areas
  • Drill down menus. If content is complex, then group in categories and organize it in categories.
21
Q

Feedback (Mobile)

A
  • Have a method to deliver feedback. From the tactile (think the vibration function) to the visual (progress bars) – you need to keep users aware as to whether things are going well as they execute their task.
  • Ask for confirmation when necessary. Modal boxes are annoying, but the exception is when you want to protect the user. If you’re asking if someone wants to delete a photo, for example, you can ask if they’re sure before you carry out the action.
22
Q

Continuous (Mobile)

A

If the user was performing a task but was interrupted, when back to the app it should continue where it was.

23
Q

First time of Use (Mobile)

A
  • Keep things simple and focus very much on key tasks when your app first launches. You can add complexity over time.
  • If it’s confusing or hard to carry out a task the first time that your app is used – it’s likely that it will never be used again.
24
Q

Qualitative User Research - Methods for Mobile Apps

A
  • Lab Studies
  • Journal/Diary Studies
  • Observational/Field Studies
25
Q

Qualitative User Research - Methods for Mobile Apps - Lab Studies

A
  • Designed to assure that users can use the product
  • Conducted in a lab, where the research team can observe the user
  • Moderator can question the user, to clarify any action performed.
  • Since the experiment is conducted in a lab, it lacks veracity of real world
26
Q

Qualitative User Research - Methods for Mobile Apps - Journal/Diary Studies

A
  • A journal/diary study poses the questions; “When do users actually use our app? In what contexts do they use our apps?” and they involve the user writing down the when, how, why and other observations each time they use the app.
  • Their biggest drawback is that they rely on the user remembering to note down each use of the app (something that may not feel “pressing” for participants).
27
Q

Qualitative User Research - Methods for Mobile Apps - Observational/Field Studies

A
  • You use a field study to determine; “When are users using the app? What context do they use the app in?” A field study requires a researcher to observe (and usually film) a subject as they interact with the app.
  • This can generate a lot of useful data and is pretty easy on the participants, however, field studies offer no guarantee that the people you are observing are “typical users” who represent the whole user base and they can be intrusive and awkward to carry out
28
Q

Quantitative User Research - Methods for Mobile Apps

A
  • Online Surveys (including Behavioural Tracking)
  • Behavioural Analysis
  • Automated Logging Activity
  • Experience Sample Methods
29
Q

Quantitative User Research - Methods for Mobile Apps - Online Surveys (including Behavioural Tracking)

A
  • Online applying a questionnaire combined with automated data collection reflecting the user’s actual behaviour. They are designed to answer the questions; “What do users think of our product? What do they perceive the value to be?”
  • Online surveys are incredibly cost-effective and can create large amounts of data on a geographically diverse basis
  • The downside is that there is no direct contact with the user
30
Q

Quantitative User Research - Methods for Mobile Apps - Behavioural Analysis

A
  • Behavioural analysis works to determine the answer to the “how do people use our app?” question.
  • Through a software installed in the user’s devices, we can track the users interactions with the app (what and how they interact).
  • Conversely, the data will not show the user’s context or their intentions. This is why behaviour analysis is often conducted alongside a survey – to try and develop a clearer picture of “why”.
31
Q

Quantitative User Research - Methods for Mobile Apps - Automated Logging Activity

A
  • Another way to answer the “how do people use our app?” question is through automated logging – that records events that are generated on the mobile device and without user input.
32
Q

Quantitative User Research - Methods for Mobile Apps - Experience Sample Methods

A
  • Right method for mobile, since it is possible to send automated messages to the user to assess what they are doing and what they think about it.
33
Q

Remote Research Methods for Mobile Applications

A

Cheapest: diary (or journal) study.
* A diary study is a long-term study in which users make notes on when they use the product, how they used the product and any frustrations that they encounter.
* It is important for the researcher to choose a sample size large enough for results to be statistically significant and which allows for the inevitable “drop out” as some study participants fail to complete their diaries or are unable to continue with the study.

  • Online Surveys
  • Behavioural Analytics
34
Q

Goals of Mobile UX

A
  • Ease to use
  • Easy to Learn
  • Ease of Joy
35
Q

Goals of Mobile UX - Ease to use

A
  • Users know where everything is
  • No discover needed
  • Features are placed in usual places
  • Users are in control
36
Q

Goals of Mobile UX - Easy to Learn

A
  • Users learn after a while interacting
  • Users remember shortcuts, rules, etc.
  • Learning Curve is short
37
Q

Goals of Mobile UX - Ease of Joy

A
  • Develops loyalty
  • Users enjoy using it
  • Look forward to it
  • No pressure because it is a friendly environment
  • User feel a connection with it
38
Q

Rules & Best Practices for Mobile UX

A

Rules:
* Context is Key
* Fat-thumb Friendly ☺

Best Practices
* Use Clean layouts
* Intuitive Controls
* Visible back button
* Intuitive Navigation
* Intuitive Icons

39
Q

Guidelines for Mobile UX

A
  • Small Screens
  • Keep Navigation Simple
  • Keep Content to a Minimum
  • Reduce the Inputs
  • Connections are not always stable
  • Continuous Experiences
40
Q

Cognitive Friction

A

When a user is confronted with an interface or affordance that appears to be intuitive but delivers unexpected results.

41
Q

How to Avoid Cognitive Friction

A

Before Development
* Conduct User Interviews
* Task Flows
* Create easy to use information architecture

During Development
* Expert Evaluation
* Usability Test with prototypes

42
Q

Personas and Mobile UX

A

When you create scenarios for product use, for example, the persona should be used to give that scenario context.
It will then tell a story of how the product will be used rather than how we think it might be used.

43
Q

Task Analysis - Why?

A
  • Understand users’ goals
  • Steps taken to achieve such goals
  • Personal, social and cultural experiences
  • Influence of external environment
44
Q

What is Skeuomorphism?

A

Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them.

A well-known example is the recycle bin icon used for discarding files. Skeuomorphism makes interface objects familiar to users by using concepts they recognize