user experience & front end development
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
![Page 1: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/1.jpg)
User eXperience & Front End Development
Andrea Fallas & Dan Shearmur
![Page 2: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/2.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/3.jpg)
What is User eXperience?
humans
computers
users
![Page 4: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/4.jpg)
What is User eXperience?
humans
computers
human-computerinteraction
![Page 5: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/5.jpg)
What is User eXperience?
cognition emotion behaviour
conscious
unconscious
![Page 6: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/6.jpg)
What is User eXperience?
humans
computers
cognition
behaviour
emotion
![Page 7: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/7.jpg)
What are user experiences?
experiential perceptive
subjective dynamic
emotive
![Page 8: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/8.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/9.jpg)
user EXPERIENCE
design
Designing experiences for users
USER-CENTRED design
![Page 10: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/10.jpg)
user EXPERIENCE
design
Designing experiences for users
USER-CENTRED design
limitationsneeds wants
feedbacktesting iteration
![Page 11: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/11.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/12.jpg)
Why is it important?
![Page 13: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/13.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/14.jpg)
Why is it important?
Sometimes we can be fooled into trying to do the impossible.
![Page 15: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/15.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/16.jpg)
Why is it important?
Problems arise when we start mixing up the elements that constitute this pattern.
![Page 17: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/17.jpg)
Why is it important?
Problems arise when we start mixing up the elements that constitute this pattern.
![Page 18: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/18.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/19.jpg)
Usability v. usefulnessusability
usefulness
![Page 20: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/20.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/21.jpg)
How can we measure user experiences?
interview users &
stakeholders in context
![Page 22: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/22.jpg)
Outputs from UX practice
wireframe site & page architecture
![Page 23: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/23.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/24.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/25.jpg)
Front-end development
![Page 26: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/26.jpg)
Previously
● Outsource visual design● Tackle design or usability issues ourselves
![Page 27: User eXperience & Front End Development](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/27.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c809ee4a795946308b4594/html5/thumbnails/28.jpg)
A library of interface examples
● HTML prototypes● (Eventually) a client facing version● Scolaris re-design