Digital MazeProfessional Development

Jake SmithJP74

About me

• Interactive Director at JP74

• Working with new media since 1996

• Worked on web, DVD, interactive TV…

• by day – front end developer

• Designer, programmer, problem solver

Weʼre going to look at…

• User Journeys

• User Experience

• Information Architecture

• Interface Design

• …and if Iʼm talking too fast, oryou donʼt understand, stop me!

What I canʼt tell you…

• The universal right way to do UX/UI…because thereʼs no such thing

• Future predictions about the internet and what you should be learning

• Who will win the World Cup

What level are we on?

• Designers? Coders?

• Thinkers? Do-ers?

• Jakob Nielson. Jakob who?

My concerns today

• We are scratching the surface of four areas that people study for years

• I donʼt want to hear my own voice for two hours, and Iʼm sure you donʼt either

The ʻaverageʼ userThe user journey

The ʻaverage userʼ

• Is a myth

• Every user is unique

Truths about most users

• Have the attention span of a goldfish

• Will not hang on your every word

• Likes the obvious

Why the rush?

• Users often have limited time to complete a desired task

• Often thereʼs similar information available elsewhere… get their attention or lose them

• Users will persist with bad interfaces if theyʼve invested their time already

How do theysee your work?Things we donʼt want to know #341

Heat maps

• Studies show users eye movements

• Readers scan read for relevant words

• This creates an F shape pattern

How does that help us?

• Donʼt be over-indulgent with design

• Make copy and buttons obvious

• Learn to put yourself in others shoes, really start thinking about your users

• Donʼt make your user think!

Youʼre already doing it

• Designers already take into account colours, tone of voice, shared knowledge

• Now start thinking about things like users ability, when they will be using your site, what is their goal for that visit

Your user

• Thinking about your web user goes beyond PC, screen size and browser

• Take into account age, probable location, time allocation and ability

• This leads to journeys and scenarios…

User Journey

• A method of conceptualising and structuring content and functionality

• Strong emphasis on the user, their goals and their everyday experiences

“Answering customer needs is the end point of our journeys through the structure, and the starting point of our thinking about the journey itself.”

Jason HobbsBoxes and Arrows

Identify their needs

• Look at the broad, top level needs

• These needs change with repeat visits

• Discover these primary needs through consulting, research or just plain old common sense

Create personas

• MichaelThis is the first time Iʼve booked a ticket

• ErinI know how to book a train ticket, but Iʼve never booked with this site

• NathanI know exactly what Iʼm doing

Need states

A. I have a ticket, I need to confirm connections, get a hotel or hire a car

B.Whatʼs the best route to take?C.I need costs and times to plan my tripD.I know what I want, when I need to go,

but Iʼm looking for the best price

Answering needs

• We have narratives and users problems that we can solve with design

• Take a site map or overview, and group needs within these areas, look for gaps

Needs change over time

C. Planning my tripB. Best routeD. Looking for the best dealA. I have my ticket, but I need more…

…can you account for all these needs and requirements on one homepage?

Needs change over time

Practical example

• Create 3 personas for people visiting a hospital

• Think up 5 ʻneed statesʼ these visitors may have

• Discuss how this may impact on design

User journeysrecap

How do you feel?User experience

UX

• User experience is subjective

• It cannot be designed per se

• The interaction is a reflection of your brand values and ethos

UX is multi-disciplined

• Psychology

• Computer science

• Graphic design

• Industrial design

• Cognitive science

• Heuristics

Customer experienceis the new brand

Measuring UX

• Can users complete the tasks to hand?

• Are visitor levels dropping off on certain pages? Forms not being filled in? Not making a purchase?

Measuring UX

• Task success

• Error rates

• Likert Scale

• Severity rankings

• Completion times

Good user experience comesfrom good usability

“The only intuitive interface is the nipple. After that, itʼs all learned.”

Bruce EdigerApril 1995

Usability is measurable

• Usability is the ease of use of a product or interface

• Still measured subjectively, but against known criteria, Principles of User Interface Design

Principles of User Interface Design

• Structure

• Simplicity

• Visibility

• Feedback

• Tolerance

• Reuse

Usability testing

• Paper prototyping

• Hallway testing

• A/B testing

• Guerilla testing

Hallway testing

• Grab 5 or 6 random people

• Better if they donʼt know you, or your app

• Complete a series of set tasks

A/B Testing

• Serve 90% of your visitors your standard page

• Serve 10% your new improved designs

• Check the stats

Guerilla testing

• Set tasks for people, note problems…

• …out on the road!

Volunteer please…

• Give me two venues and costs for seated tickets to watch Gorillaz via the ticketmaster.co.uk site

Benefits of usability

• Higher revenues throughincreased sales

• Increased user efficiencyand satisfaction

• Reduced development costs

• Reduced support costs

Good stuffWarning: subjective!

Remember

• UX isnʼt limited to the web

• UX applies to every gadget you interact with; video games, DVDs, cameras…

UX beyond the web

User experience recap

Questions &Answers

Break

Information Architecture

Shaping systems

What is IA?

• The structural design of shared information environments

– Information Architecture Institute

Break it down

• The way information is grouped

• Navigation methods

• Terminology

IA is the blueprint for designing your system

IA from understanding…

• Business context

• Content

• Users

Businesscontext

Content Users

Card sorting?

• Card sorting is a simple user-centered technique for obtaining insight into the structure of a site.

Next steps…

• Define the IA in a site map

• Define user journeys

• Paper prototype

• Work up finished designs

Fund Accounting

Asset Valuation

InvestmentInformation Services

CorporateManagement

Website Design

HR

IT Support

Intranet

VOIP systems

PR

EHM SERVICE PROVIDERSSITEMAP v7 EHM SERVICE PROVIDERS HOMEPAGE:

CONTACT

CONTACTDETAILS(Including

Enquiry Form)

CAREERS

LATESTNEWS

NEWSSERVICES

Company Formation& Secretarial

Services

ABOUT

VALUES

HISTORY

BENEFITS

PRIVACYPOLICY ACCESSIBILITY SITEMAPDISCLAIMER

COMPANYSERVICES

OTHERSERVICES

FUNDSERVICES

BusinessDevelopment& Consultancy

Accountancy

Taxation

Payroll

Compliance

HOME

News

listing / individual eventEvents

In the Press

view by month/year?Archive

News & Events

A B C listingsAmerica

Europe

Asia

Clients

Categories

Themes

Advanced Search

My Selection

Help?

Digital Library

GDR Report

City Shopping Lists

Logout

Member's Area

Client Login

Why GDR?

Global Innovation Report

Kate A

Lucy J

Amy H

Jo M

Catherine D

Conference Speaking

Creative Matchmaking

Tailored Reports

Contributors

Services

Our People

Contact

GDR Home

Information architecture

recap

Interface DesignYou donʼt realise the doing

What is interface design?

• The design of software, appliances, machines, websites etc., with the focus on the userʼs experience and interaction

Interface design goals

• To make interaction as simple and efficient as possible

• Good interface design doesnʼt draw unnecessary attention to itself

• Must balance technical functionality and visual elements

Some interface design basics

Fittsʼ lawMeasure human movement

Interface design

• Understand your delivery platform

• Set your standards and stick with them

• Clear and consistent use of language, icons, buttons, drop downs… whatever. Do it once, keep doing it.

Interface design around the house

Try this at home!

Win or fail?

• Consistent use of icons and language

• If conventions exist, follow them

• Too much choice is a bad thing

A “nearly” interface

What would I change?

• Make the drop down menu obvious

• Reduce mouse travel = reduce fatigue

• Remove the adverts!

Going forward

Going forward

• HTML5 spec includes Geolocation

• Mobile phones now feature GPS and accelerometers as well as Wifi

• Projectors are becoming miniaturised

• Context becomes more important

Context via GPS

• Visiting a hospital, how far away will determine your direction instructions

• Directions can turn from road based into building layouts if GPS recognises youʼre in the hospital grounds

What next?

Interface design recap

Questions & answers

Thank you

Push yourself further

• Useful sites;uxmag.comusabilityfirst.comuseit.com

• Apps;silverbackapp.combalsamiq.com

• More reading;Donʼt Make Me Think&Rocket Surgery Made Easy–Steve Krug

• Video;objectifiedfilm.com

Jake Smith – JP74jake@jp74.com – @jake74