User eXperience & Front End Development

28
User eXperience & Front End Development Andrea Fallas & Dan Shearmur

description

What are user experiences and how can we design them optimally? Why does UX matter and how does it interface with software development? And what does a unified design approach mean for front-end development at Semantico?

Transcript of User eXperience & Front End Development

Page 1: User eXperience & Front End Development

User eXperience & Front End Development

Andrea Fallas & Dan Shearmur

Page 2: User eXperience & Front End Development

UX & FED at Semantico

< 2010 The dark ages…

2011 FED – DanS

2012 FED – Zsuzsa & Gib

2013 UX Architect – AndreaHead of Design – Owen

Page 3: User eXperience & Front End Development

What is User eXperience?

humans

computers

users

Page 4: User eXperience & Front End Development

What is User eXperience?

humans

computers

human-computerinteraction

Page 5: User eXperience & Front End Development

What is User eXperience?

cognition emotion behaviour

conscious

unconscious

Page 6: User eXperience & Front End Development

What is User eXperience?

humans

computers

cognition

behaviour

emotion

Page 7: User eXperience & Front End Development

What are user experiences?

experiential perceptive

subjective dynamic

emotive

Page 8: User eXperience & Front End Development

Designing user experiences

User experience design (UXD) refers to:

"all aspects of [a] person’s experience with the system including industrial design graphics, the interface, the physical interaction and the manual."

— Don Norman (who invented the term)

Page 9: User eXperience & Front End Development

user EXPERIENCE

design

Designing experiences for users

USER-CENTRED design

Page 10: User eXperience & Front End Development

user EXPERIENCE

design

Designing experiences for users

USER-CENTRED design

limitationsneeds wants

feedbacktesting iteration

Page 11: User eXperience & Front End Development

Designing experiences for users

needs, wants & limitations of

users

multi-stage problem solving

process

optimise the system to

accommodate user desires

USER-CENTRED design

Page 12: User eXperience & Front End Development

Why is it important?

Page 13: User eXperience & Front End Development

Why is it important?

Sometimes it's just not very clear what we're meant to be doing.

Page 14: User eXperience & Front End Development

Why is it important?

Sometimes we can be fooled into trying to do the impossible.

Page 15: User eXperience & Front End Development

Why is it important?

Conflicting instructions and design patterns can make for a very confusing user experience, so we develop useful conventions.

Page 16: User eXperience & Front End Development

Why is it important?

Problems arise when we start mixing up the elements that constitute this pattern.

Page 17: User eXperience & Front End Development

Why is it important?

Problems arise when we start mixing up the elements that constitute this pattern.

Page 18: User eXperience & Front End Development

Why is it important?

Most doors are fairly simple.

What if you've never seen a door before?

How would you feel, faced with this one?

Page 19: User eXperience & Front End Development

Usability v. usefulnessusability

usefulness

Page 20: User eXperience & Front End Development

USER-CENTRED design

How can we measure user experiences?

survey users, goals & preferences

card sorting build information

architectures

prototype interaction

models

personas reflect user

groups

wireframe site & page architecture

interview users &

stakeholders in context

tree testinginformation

architectures

usability testinginteraction &

context

Page 21: User eXperience & Front End Development

How can we measure user experiences?

interview users &

stakeholders in context

Page 22: User eXperience & Front End Development

Outputs from UX practice

wireframe site & page architecture

Page 23: User eXperience & Front End Development

What does this mean?

Helps us BUILD THINGS

Stop building USABLE WRONG THINGS

CONCEPTUALISE what we are building

FRAMEWORKS & benchmarks

ANTICIPATE problems

USER-CENTRED design

Page 24: User eXperience & Front End Development

The interface with development

PRODUCT development

PLATFORM development

ACCESS management

BESPOKE development

FRONT-END development

ORCID development

USER-CENTRED design

UXAndrea

DESIGNOwen

Page 25: User eXperience & Front End Development

Front-end development

Page 26: User eXperience & Front End Development

Previously

● Outsource visual design● Tackle design or usability issues ourselves

Page 27: User eXperience & Front End Development

Having a unified design team will

● Create a feedback loop making things a little bit more iterative

● Solidify process

Page 28: User eXperience & Front End Development

A library of interface examples

● HTML prototypes● (Eventually) a client facing version● Scolaris re-design