FutureLearn : Digital Skills: User Experience (continued)
Understanding Your users
The importance of user research
- understand who users are going to be
- what needs you are filling, what are their pain points?
- familiar or brand new to the concept
- age, nationality, hobbies, activities do they have?
- understand commonalities/differences between users
- input from representatives of real users
User research methods
- What's important?
- which approach is best
- interviews and focus groups (members of public, staff from company, friends depending on project)
- surveys/ questionaires about what they do right now, how they feel about it
- Market research - using reports and statistics
Watching users use existing sites or apps can be useful.
Often what people say they do and actually do are different.
Formal lab-based usability studies can track people's gaze and emotions as they interact if you need some serious numerical data.
Try not to lead the user into answers with your questions.
DON'T ASK Wouldn't it be great if the product did this?
DO ASK What are your frustrations? What would you like the product to do?
Creating personas
- ways of describing different types of user
- profile of an example user, story about who they are, their motives, brands they like
GOALS AND IDEAS (Describe phase)
Scope out solution by brain storming with an open mind.
what will the user achieve if successful?
What will happen if they have a problem?
List what is critical for your solution.
Prioritise things that are nice to have or might not be important to customer.
DESIGNING THE EXPERIENCE
User Journeys
ONLINE (a happy path)
- arrive at website
- search product name
- review the product
- add to basket
- got to checkout
- log in
- make payment
- get confirmation email
OFFLINE
Returns process
- printing returns label
- physically going to post office
THERE MIGHT BE ALTERNATIVE PATHS (browse items, sign up for account)
What if they type product name wrong/Out of stock/discontinued
Let the user know when something might come back in stock, offer alternatives, be helpful.
VISUAL DESIGN (brand, graphic design)
How it looks and feels.
Typography (what you use for writing text)
- body text, headline, buttons
- font, text-sizes, colours
Colours
- are something you can use to draw attention or categorise items
- colour schemes are also important for branding
Image Styles
- look and feel of your page
- using photography, cartoon/illustration style imagery?
Spaces, Shapes and lines
- ways to construct and visually divide your page (emphasise certain elements)
Symbols
- icons for menus, user actions, content categories
- should make sense to the user
Branding
- message your trying to convey?
- creating a brand from scratch/ updating existing one/ working with existing brand guidelines
FUNCTIONAL DESIGN
- how things work (features/interactions on app/website)
TECHNICAL DESIGN
- how underlying technology will deliver functional design
- where data comes from or how components are to be built
IMPACT OF VISUAL DESIGN
- graphic design is a way of telling your users how they should feel about you and your product before they even interact with it
- can make or break for your users
- can lead to trustful experience for your users, set the right expectations
Impact of Visual Design of Websites
- Which websites do you trust, think are reputable?
- Are they obviously directed at an age group?
- Can you think of a website that you don't trust and wouldn't recommend?
Visual Design can be done at various stages throughout the project.
Early Concepts
- depending on product or service, can be done now
- might not know what site/app needs to do, or what content is
- need to demonstrate some design concepts to other people, communicate what you're about or build enthusiasm with people
- a polished bran dtheme/logo/sample page design might be useful to get feedback on
During analysis
- interactive prototyping, a visual way of defining how your site/app will work
- don't go overboard! still subject to change at this stage
- functional design ssimple, easy to edit, until functionality is finalised
- sample pages to show
Later in design process
- Once things have been agreed, time to build more visual aspects into the protype
- it will look and feel more like the real thing, but will take more time to manke any major changes
STRUCTURING YOUR SITE
Information architecture
- term that's used for how you organize the contents of what your displaying to users
- defined by user journey
Outcome should be logical, clear, user-friendly flow of contents on the site/app
dropdown menus, categories and labels of products
Good structure is important for good usability.
How your site is structured will affect how users feel about it.
Good Information architecture
- organising (group products, services, concepts together?)
- labelling (words or icons, consistent)
- navigation (browsing around, or going step by step)
- search
- personalisation (recommendations)
Test and refine information architecture with users.
Card Sorting is a way you can test your label/category systems. Do you users organise the same way as you do?
Important to test information architecture at this stage.
Prototyping
- a model/mockup early version of anything before the real thing is built
- could be a website/app/physical product
- experiment, test, communicate your idea before investing time and money
- important concept for user testing
Type of prototype will depend on where you are in the design phase or objectives to achieve with it.
Paper Prototyping
- Early on, low in detail, on paper/card, sketches
- draw out steps of user journey, see ow journeys flow and link.
- make changes really quickly and easily, on the spot to improve it.
- Draw them in design software.
Wireframes and interactive prototypes
- drawing of digital screens
- shows where things are, how they link together
- called a wireframe because it should look like lines and boxes, no graphics!
- make them interactive
Level of detail is referred to as fidelity. Starting at low fidelity means things are very basic, sketches and flows. As design progresses, you move to higher fidelity. Add more detail, refine so it's closer to final design.
Wireframe
- made up of navigation elements, information architecture
- different screen areas, show where text, videos, images might go
- input fields
- placeholder blocks for card payment details
when going to high fidelity, list out actual labels, and exact fields. Anything the user interacts with including links to other pages.
design responsively
Free wireframing tool
Interactive prototypes
- can go from basic wireframe style drawing to perfect replicas
- test logic and flow, highlight possible flaws which weren't visible in wireframes.
- useful to communicate idea to users, developers, business stakeholders