the elements of user experience - wordpress.com · the user’s actions. interaction design creates...
TRANSCRIPT
![Page 1: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/1.jpg)
UXD
the elements of user experience
![Page 2: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/2.jpg)
UXD
S U R F A C E
S K E L E T O N
S T R U C T U R E
S C O P E
S T R A T E G Y
the five planes of UX
web pages or app screens; images, text, things you can click
the optimized organization and arrangement of onscreen elements
the number of places you can go, organized contextually
features and functions contained within the site, system or app
the site, system or app’s reason for being, to the creator and to users
![Page 3: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/3.jpg)
UXD
S U R F A C E
S K E L E T O N
S T R U C T U R E
S C O P E
S T R A T E G Y
concrete
abstract
the elements of user experience
visual design
interfacedesign
interactiondesign
functionalspecification
navigationdesign
informationarchitecture
contentrequirements
user needsbusiness objectives
T A S K S I N F O
![Page 4: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/4.jpg)
UXD
S T R A T E G Y
the strategy plane
user needs come from the people who will use the product.
what do they want from us?
how does that fit in with their other goals?
business objectives define success, and typically mean making money, saving money or both.
how will we know if we have succeeded?
user needsbusiness objectives
![Page 5: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/5.jpg)
UXD
S C O P E
the scope plane
strategy becomes scope when user needs and business objectives are translated into requirements for content & functionality
functional specifications describe the feature set of the product – what are we creating?
content requirements detail what information is required to provide value to users – images? audio? video? dynamic real-time data?
functionalspecification
contentrequirements
how the customer explained it
how the project manager heard it
how the designer designed it
how the engineer & developer built it
how the customer really wanted it
![Page 6: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/6.jpg)
UXD
S T R U C T U R E
the structure plane
scope is given structure when we define how the system responds to the user’s actions.
interaction design creates a structured experience of patterns and sequences that present appropriate options to users.
information architecture defines the volume of content, along with how it’s arranged and organized – on each screen as well as across the entire product.
interactiondesign
informationarchitecture
![Page 7: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/7.jpg)
UXD
S K E L E T O N
the skeleton plane
structure informs the skeleton of the system – specifically, what it may look like and how users move through tasks and information.
interface design determines how to best arrange and present visual elements for the user to interact with.
navigation design provides onscreen elements that allow the user to move through tasks and information in an intuitive way.
interfacedesign
navigationdesign
![Page 8: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/8.jpg)
UXD
S U R F A C E
the surface plane
visual design uses colors, images, typography and effects, each specifically chosen to:
a) support and reinforce the meaning of the content being presented
b) guide the user where applicable through data, tasks or information
c) reduce cognitive load and enable recognition and intuitive learning
d) be culturally/socially appropriate
visual design
![Page 9: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/9.jpg)
UXDthese planes are interdependent
S K E L E T O N
S T R U C T U R E
choices made on each plane affect the choices available on other planes.
![Page 10: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/10.jpg)
UXDUXD elements must be flexible
requiring work involved with each plane to finish before work on the next can start is problematic – and results in a frustrating user experience.
ST
RA
TE
GY
SC
OP
E
ST
RU
CT
UR
E
SK
EL
ET
ON
SU
RF
AC
E
effo
rt
time
![Page 11: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/11.jpg)
UXD
a better approach is to have work on each plane finish while work on the next plane is in progress, so the two inform each other.
effo
rt
time
ST
RA
TE
GY
SC
OP
E
ST
RU
CT
UR
E
SK
EL
ET
ON
SU
RF
AC
E
UXD elements must be flexible
![Page 12: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/12.jpg)
UXDadditional factorsit’s not always that clear cutit can be difficult to tell which element is responsible for a UX problem.
‣ is the visual design inappropriate?
‣ is the underlying navigation the problem?
‣ is the browser interpreting the code incorrectly?
sometimes it’s more than one thing, and sometimes it’s multiple things combined.
![Page 13: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/13.jpg)
UXDadditional factorscontent is still kingit’s why users come to a site or open an app
is what the user wants available?
is the variety appropriate?
is the content relevant to the reason they’re here?
do we have ways to catalog, track and present the content when, where and how the user wants it?
![Page 14: the elements of user experience - WordPress.com · the user’s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options](https://reader034.vdocuments.us/reader034/viewer/2022042420/5f36c81883403958a755baea/html5/thumbnails/14.jpg)
UXD
dev
design
additional factorsappropriate technologythe right platform is critical in experience delivery
technology enables UXD to extend across multiple OS, browsers, devices and form factors
technology can’t be seen as an add-on or a nice to have – it needs to be inherent in how we design
touchscreen interaction, for example, has changed the way we navigate digital information
ux