crafting experience
Embed Size (px)
DESCRIPTION
UX Design ProcessTRANSCRIPT
Crafting ExperienceUX Design Process and Testing
@RezaPrabowo
Reza PrabowoFull-time Cyclist, part-time UX Designer
@RezaPrabowo
What is UX?I’m pretty sure the dude before me
has explained it brilliantly.
IAInformation ArchitectureThe interface structure and navigation scheme
IDInteraction DesignThe page-level layout, task fulfilment, and
component flow
UEUsability EngineeringThe study of discrepancies between expected
and actual user behavior
VDVisual DesignThe consistent visual treatment of elements
and components
VD“What people often overlook is that, for every type of
user interface element the interaction designer
specifies, the visual designer must design a widget or
devise a corresponding style. And the visual designer
must consistently apply these styles to every instance
of each element throughout the application”
- Steve Psomas
PTPrototypingThe functioning composition of proposed
interactive concepts
UX Design Process
AnalysisCollecting information about the probleməˈnalɪsɪs
əˈnalɪsɪsAnalysis
User Research
• Surveys - Get feedback from users
• User Interviews - Everyone has a story, dig them deep
• User testing - Sitting users in front of your website or app and
asking them to perform tasks, and to think out loud while doing so
əˈnalɪsɪsAnalysis
Competitive Analysis• Benchmarking similar products / competitor
əˈnalɪsɪsAnalysis
Trend Analysis• Spot the latest trend and find out why they
do it that way
• patterntap.com
• uxporn.uxpin.com
• pttrns.com
ˌʌɪdɪˈeɪʃ(ə)nIdeationThe formation of ideas or concepts.
ˌʌɪdɪˈeɪʃ(ə)nIdeation
Doodle!
• Sketch your ideas. Proven to be the fastest UX solutions • Adaptive Path's Sketchboard
ˌʌɪdɪˈeɪʃ(ə)nIdeation
Screenflow
• Create relationships.
Between pages,
screens, components
dɪˈzʌɪnDesignThe fun part.
dɪˈzʌɪnDesign
Low fidelity wireframes
• A visual guide that represents the skeletal framework of a
website / application
• With lo-fi wireframe, we can test and iterate design
solutions faster
dɪˈzʌɪnLo-fi wireframes
Tools: UXPin, Balsamiq, Axure, OmniGraffle.
Design
dɪˈzʌɪnDesign
Visual Design
• Communicates the brand, interactivity, workflow, and
relationships
• Consistently apply these styles to every instance of each
element
dɪˈzʌɪnVisual designDesign
ˈprəʊtətʌɪPrototypingMaking it work
ˈprəʊtətʌɪPrototyping
• Deliver prototypes of concept models for testing by the
usability engineer.
• Increasing process efficiency
ˈprəʊtətʌɪ
UXPin
Prototyping: Tools
ˈprəʊtətʌɪ
inVision
Prototyping: Tools
ˈprəʊtətʌɪProto.io
Prototyping: Tools
ˈprəʊtətʌɪAxure
Prototyping: Tools
dɪˈzʌɪnPrototyping
Tools
• UXPin - uxpin.com
• inVision - invisionapp.com
• Proto.io - proto.io
• Axure - axure.com
ˈdɒkjʊm(ə)ntDocumentMaking documents and specifications of the user experience.
Making it easier for developer to understand how it works
ˈɪmplɪm(ə)ntImplementWorking with the developer to make sure they
deliver the application / website as designed
dɪˈplɔɪDeployYou can relax now. But is it over?
But this is the easiest way to explain what UX is
Never mind the fact that they use comic sans
Reza PrabowoFull-time Cyclist, part-time UX Designer
behance.net/RezaPrabowo