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

User eXperience & Front End Development

Embed Size (px)

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?

Citation preview

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