Module 8 Flashcards
Software Application
A computer program designed to perform a certain function or specific tasks
Responsive Website
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
Benefits of a responsive website
- The same website works on all devices - multiple websites don’t have to be designed and maintained for multiple devices
Mobile website (m-dot)
A website designed specifically for the capabilities and constraints of mobile devices e.g small screens and touch screen
Benefits of creating a separate mobile and desktop website
Responsive websites are very complex to develop and expensive to build and maintain
Native App
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
Deciding on what type of website to build
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
Justifying a native app
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
Empathy map
In other module ***
Different application types : Utility Apps
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
Process Applications
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
Consumption Applications
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
E-Commerce Applications
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
App unbundling
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
Mobile flow (linear flow)
Linear flow
E.g booking a flight
E.g Buying a book on a retail website
Characteristics of linear flow
- Each step follows a natural sequence
- Each step has dependencies (e.g previous step has to be completed)
E.g you can’t select flights till you have searched - Routine transactions
- Short and quick transactions
Hub and spoke flow
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
Mobile navigation
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
Why navigation is important
- Critical to a good user experience
- Good navigations smoothens the flow for users - reduces friction
Navigation Patterns
- Tabs
- Off-canvas
- Floating buttons
- Content as navigation
- Blended
When to use tabs (next slide first)
- Small app
- Small number of options available to the user
Tabs
Tabs: Primary navigation menu appears on the bottom or the top of the screen - look at video
Off canvas menu / sliding door
-video pic
Good to use when there are multiple options on a small screen
e.g clothing store with multiple sections
Guardian news sections
When to use off-canvas menu
- Broad content or functionality
- Too many options for tabs and all the options carry equal importance
Tab + off canvas
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
When to use tabs + off - canvas
- Broad content or functionality
- Some content is more important (tabs)
Floating buttons
- Popular with utility apps when there is only one thing the user is going to do E.g Uber - “Book now”
- Use to prioritise certain use cases
- Can also be used for navigation
E.g FLoating pen on gmail to compose a new email
Navigation on Utility apps
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
Navigation on consumption apps
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
Recommendation for navigation on consumption apps
- Content as primary navigation
- Secondary options off-canvas
Navigation on ecommerce apps
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
Navigation on process apps
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
Input types (numbers)
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
Input types (email address)
Input type should be set to email - so the user is displayed an email keypad
@ and . are available to user
Benefits of specifiying input types
- Reduces workload for the user
- Reduces number of errors made by the user
Smart default
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
Smart defaults
- Use available data to set smart defaults e.g users location
- Make an educated guess on previous activity
- Guess wisely and most users will benefits
Content vs Navigation
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
Content vs Navigation (Banking App)
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
Content vs Navigation (Summary)
- Always prioritise content over navigation
- Prioritise most popular / most critical content first
- Keep navigation but reprioritise it, it should be available and accessible but secondary
Tap targets (on mobile screen)
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
Displaying content : List View
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
Displaying content: Thumbnail view
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
Displaying content: Grid View
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
Map View
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
Prioritising content
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
Displaying content
Choose how to display content based on:
- How simple or complex the content is
- How important imagery is
- How relevant location is
Notifications
- Notify user of communication from others
- Remind them of upcoming tasks or events
Good notifications
- Inform the user
- Bring information to the user
- Give the user quick access to functionality
- Give the user quick access to the app
NOTE: Annoying and unnecessary notifications are the top reason users delete and app
What can we do to create better notifications
- Be genuinely useful by limiting notifications to communications and tasks
- Be time sensitive
- Avoid bombarding users
Passive notifications to inform
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”
Be time sensitive
Good example: Reminder for a meeting an hour before it starts
Skeleton states
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
Navigation for larger screen
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)
