Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

UX > Module 8 > Flashcards

Module 8 Flashcards

1
Q

Software Application

A

A computer program designed to perform a certain function or specific tasks

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

Responsive Website

A

A website or web application that adjusts it’s appearance depending on device being used to view / access the site e.g mobile or desktop

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

Benefits of a responsive website

A
  1. The same website works on all devices - multiple websites don’t have to be designed and maintained for multiple devices
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Mobile website (m-dot)

A

A website designed specifically for the capabilities and constraints of mobile devices e.g small screens and touch screen

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

Benefits of creating a separate mobile and desktop website

A

Responsive websites are very complex to develop and expensive to build and maintain

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

Native App

A

Software application built specifically for use on mobile or tablet device

Optimised for mobile capabilities so can deliver a better user experience when done well

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

Deciding on what type of website to build

A

Small - medium business with a small uncomplicated website - RESPONSIVE WEBSITE

Easier to build and maintain one website
Desktop and mobile experience is relatively the same for users

BBC website - website is uncomplicated as it only consists on videos and text. - RESPONSIVE WEBSITE

Facebook - complicated application
Better to build a separate mobile and desktop application

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

Justifying a native app

A

Check list for deciding to make a native mobile app

Volume: Do you have a lot of users?

Frequency: How often do users use the application?

Unique: Does your app need native capabilities that a web app won’t provide? E.g banking app - notifications and face id / fingerprint id

Cost: Is the cost of maintaining and building the native app worth it? v

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

Empathy map

A

In other module ***

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

Different application types : Utility Apps

A

Utility apps are typically known as single use case applications - they only do one thing

Simple and structured

Example: Calendar app

Click add an event - fill in structured form with details and done

Example: Uber

Just does one thing - order a taxi

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

Process Applications

A

Complex and structured

Example: AXA Insurance application

Defined process but there is a lot of steps and information to enter for the user to enter

Alot of complex calculation take place to calculate the users premium

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

Consumption Applications

A

Simple and random

Can’t predict where the user is going to click first e.g on what articles

It’s not a complicated process

Example: Guardian News

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

E-Commerce Applications

A

Complex and random

E.g ASOS

user has to add to bag, add another item to bag then go through the check out process - quite a lot of steps involved

Steps are random too - can’t predict what the user might add to bag

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

App unbundling

A

Example: Facebook

Facebook created two separate app

Facebook app: (news feed etc) - consumption app

Messengre (sending messages) - utility app

Example: Google Drive

Divided out into

Google Sheets
Google Docs
Google Slides

Better experience for users breaking them down into seperate apps as oppose to trying to create one single app to fit two different styles of apps

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

Mobile flow (linear flow)

A

Linear flow

E.g booking a flight

E.g Buying a book on a retail website

Characteristics of linear flow

  1. Each step follows a natural sequence
  2. Each step has dependencies (e.g previous step has to be completed)
    E.g you can’t select flights till you have searched
  3. Routine transactions
  4. Short and quick transactions
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Hub and spoke flow

A

E.g Advertising a property

Has a set of criteria that has to be filled in to upload an ad

E.g Photos are required, price needs to be updated, description needs to be filled in.

Details can be completed in any order or sequence

There are no dependencies in the steps E.g updating the price doesn’t depend on the photos having been uploaded

hub and spoke page is more suitable for this process - allows user to take their time to go back and fill in fields and edit them before submitting the advertisement

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

Mobile navigation

A

Primary goal of navigation is to help users find information and functionality and encourage them to take desirable actions

Tells the user:
1. Where I am
2. Where I can go
3. How do I get there
4. How do I get back to where I started

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

Why navigation is important

A
  1. Critical to a good user experience
  2. Good navigations smoothens the flow for users - reduces friction
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Navigation Patterns

A
  1. Tabs
  2. Off-canvas
  3. Floating buttons
  4. Content as navigation
  5. Blended
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

When to use tabs (next slide first)

A
  1. Small app
  2. Small number of options available to the user
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Tabs

A

Tabs: Primary navigation menu appears on the bottom or the top of the screen - look at video

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

Off canvas menu / sliding door

A

-video pic

Good to use when there are multiple options on a small screen

e.g clothing store with multiple sections

Guardian news sections

23
Q

When to use off-canvas menu

A
  1. Broad content or functionality
  2. Too many options for tabs and all the options carry equal importance
24
Q

Tab + off canvas

A

E.g Facebook (uses both)

Most important actions e.g news feed, friend requests, notifications appear in tab

Less important options e.g groups, pages, apps appear in off-canvas

25
Q

When to use tabs + off - canvas

A
  1. Broad content or functionality
  2. Some content is more important (tabs)
26
Q

Floating buttons

A
  1. Popular with utility apps when there is only one thing the user is going to do E.g Uber - “Book now”
  2. Use to prioritise certain use cases
  3. Can also be used for navigation

E.g FLoating pen on gmail to compose a new email

27
Q

Navigation on Utility apps

A

Simple and structured

EXAMPLE: Strava - running app

Floating navigation for key activities - “+” button to start recording new activity

Less important appears in off-canvas navigation

EXAMPLE: N92

Floating buttons for transferring money etc

Settings / less important functions are off canvas

28
Q

Navigation on consumption apps

A

Simple but random flow

Example: Guardian, BBC, Netflix

Tasks are not complicated but the users flow is unpredictable

Most common pattern is to use the content it’s self as the navigation

Example click on the image and title of the news article - the guardian

Netflix: click on the film icon
Uses an off screen canvas to support - e.g film categories and settings

Spotify / Apple music uses content as navigation with tabs at the bottom

29
Q

Recommendation for navigation on consumption apps

A
  1. Content as primary navigation
  2. Secondary options off-canvas
30
Q

Navigation on ecommerce apps

A

Complex and random workflow

EXAMPLE: Asos

Puts all the navigation off-canvas

All the clothing categories appear in the off-canvas menu

Recommendation: Off-canvas

31
Q

Navigation on process apps

A

Complex workflows but very structured

EXAMPLE: Zoopla.co.uk

Uses hub and spoke architecture - user can update and edit advertisements

EXAMPLE: MyFitness Pal

Floating navigation button to navigate to different areas of the aop. e.g log excercise, log food etc

Example: AdWorld

Linear approach to creating adverts

32
Q

Input types (numbers)

A

Forms

E.g phone numbers: Should be listed as a telephone type input so user is shown a numeric keypad when they select the phone number field

  • Minimises risk of user entering invalid characters into the field
  • Less steps for the user to switch keypads
33
Q

Input types (email address)

A

Input type should be set to email - so the user is displayed an email keypad

@ and . are available to user

34
Q

Benefits of specifiying input types

A
  1. Reduces workload for the user
  2. Reduces number of errors made by the user
35
Q

Smart default

A

BAD EXAMPLE: Amazon automatically sets country on new delivery addresses to UK even though you are located in Ireland

Should have used the users default delivery address, previous delivery address, IP address or other location data to pinpoint users location

GOOD EXAMPLE: Kayak app - automatically sets users outbound destination as their current location

GOOD EXAMPLE: Google Maps mobile application automatically sets starting point as the users current location (assumes the user is out looking for direction based of it’s most popular use case)

BUT

On the desktop google maps leaves the starting point blank (doesn’t assume you are out and about)

TRAVEL APP: myTaxi sets default pick up location to the users home address

36
Q

Smart defaults

A
  1. Use available data to set smart defaults e.g users location
  2. Make an educated guess on previous activity
  3. Guess wisely and most users will benefits
37
Q

Content vs Navigation

A

Big screens can accomodate content and navigation

Sometime you have to choose between content or navigation on small mobile screens

E.g Facebook: Users primarily come to view the news feed, so they have provided that to the user over navigation when the first load the app

Remember users have come to consume content not play with navigation

38
Q

Content vs Navigation (Banking App)

A

Bad Example: BOI App

Immediately lists all the users bank accounts - the screen is 100% navigation once the user has logged into the app

Good Example: N92

Automatically defaults to the users current account and provides details of recent transactions (content) to user

39
Q

Content vs Navigation (Summary)

A
  1. Always prioritise content over navigation
  2. Prioritise most popular / most critical content first
  3. Keep navigation but reprioritise it, it should be available and accessible but secondary
40
Q

Tap targets (on mobile screen)

A

48 X 48 dp : Android
44pt X 44pt: iOS

Targets that are too small cause more errors with users

Better to have bigger and chunkier controls on mobile

41
Q

Displaying content : List View

A

Example: BBC News

Each article on the list has the heading and an image and story category - no other info is needed for the user to decide what article to choose

Example: Amazon

More information is provided in the list view as it is more difficult to decide which to click into, more info is necessary - more variables needed to make the decision

42
Q

Displaying content: Thumbnail view

A

The image has to tell the story

E.g myhome.ie (big ticket items)

The picture of the house takes up majority of the screen - the image is selling the product

Some details are listed below images

43
Q

Displaying content: Grid View

A

Example BBC Good Food /ASOS

Images are displayed in a grid

Images are smaller than the myhome.ie house pictures because purchasing clothes / choosing a recipe is not as important

44
Q

Map View

A

Use when location really matters to user

E.g Open table

Location is important when trying to find restaurants near you / in specific area with availability

More info on each restaurant is then displayed at the bottom

45
Q

Prioritising content

A

E.g Skyscanner

Available flight options are displayed in the form of cards - no need for imagery here

Better to display more info about flight

46
Q

Displaying content

A

Choose how to display content based on:

  1. How simple or complex the content is
  2. How important imagery is
  3. How relevant location is
47
Q

Notifications

A
  1. Notify user of communication from others
  2. Remind them of upcoming tasks or events
48
Q

Good notifications

A
  1. Inform the user
  2. Bring information to the user
  3. Give the user quick access to functionality
  4. Give the user quick access to the app

NOTE: Annoying and unnecessary notifications are the top reason users delete and app

49
Q

What can we do to create better notifications

A
  1. Be genuinely useful by limiting notifications to communications and tasks
  2. Be time sensitive
  3. Avoid bombarding users
50
Q

Passive notifications to inform

A

Good Example: Amazon

“You’re package is arriving today”
- user doesn’t have to do anything but this is genuinely useful

Good Example: myTaxi: “your taxi is booked and on the way”
“your taxi has arrived”
“your taxi cost XX”

51
Q

Be time sensitive

A

Good example: Reminder for a meeting an hour before it starts

52
Q

Skeleton states

A

Give users the impression that the app is loading faster than it actually is

(Users abandon apps when they take too long to load)

E.g Facebook and LinkedINnews feed uses skeleton states

53
Q

Navigation for larger screen

A

Majority of the user action should take place in the bottom of the screen

Top of the screen is harder to reach by the user - even more difficult on the go

Don’t place primary navigation in the zone of difficult reach

Good example: Place navigation in a floating button at the bottom of the screen (zone of easy reach)

UX (9 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions