for a good user experience ux design goals, methods, tools & tales william washington |...
TRANSCRIPT
For a Good User ExperienceUX Design Goals, Methods, Tools
& Tales
William Washington | WashingtonKevin Makice| Indiana
Kuali Student UX
Getting from here to there
Development Evaluation & Adoption Use
Here
Functional Needs
User Needs
Experience
Experience
Development Adoption Use
Design(iterations)
PrototypeEvaluate
Analysis
“Requirements emerge as users begin to see the evolving design...when they see what you're building, they'll say what they meant.”
- Alan Cooper
User Centered Design is a solution
Useful
Usable
Desirable
The Goals of UCD
“Design is not just what it looks like and feels like - Design is how it works.”
Steve Jobs
• A design discipline that is implemented through UCD
• Concerns itself with all aspects of a person’s experience with a product: behavior, form, and content.
User Experience Design (UX)
• Simplicity
• User Control & Freedom
• Orientation & Exploration
• Good metaphors
The UX Perspective
• Consistency & Standards
• Error prevention & recovery
• Good feedback
• Efficiency of use
• Good help, when needed
• Core Team: UX Strategy, Design Patterns, Navigation Architecture, etc.UXA & Sr. UX Designer on Core team
• Parallel Delivery Teams:Delivery of functional areasUX Designer on each Parallel Delivery Team
UX team & methodology are in place
Kuali Student is moving toward Agile development.
The system functions evolve from simple to complex through iterative development.
UX and UCD must fit into an Agile process
IterateBacklog & prioritize usability and functional enhancementsBacklog
Design & Developsimplest solution
Evaluate through implementation
The user interface of KS is built on an evolving Rice foundation – KRAD.
• Gaps exist……between what KRAD can do and what KS needs.
…between what KRAD can do and what developers can do.
• Gaps must be tracked and managed.
UX must work within technical constraints
Design patterns & style guide
UI templates & stencils for rapid prototyping
Well-managedUI framework gaps
Successful UX in an Agile context
Functional Gaps
UIMVisual Examples
Functional Gaps
Axure LibraryInteractive Widgets
Development
Quality Assurance
Collaborative Design
UX Dev PO
Backlog
Functional Gaps
UIMVisual Examples
The UIM is a key resource for PDT collaboration.
• Helps UX make UI decisions
• Provides sample code to Developers
• Reveals known gaps to help PO prioritize
Vision for the UIM
Functional Gaps
UIMVisual Examples
UI Patterns
• Early Analysis• UX Principles
UX Dev PM
UX Dev PO
Patterns are defined and validated
• User research identifies new design needs
• Core analysis expresses desired user interfaces
• PDT Development reveals real-world interaction solutions
Building the UIM
UI Patterns
PDT Development
• Collaborative Design & Development
Core
Functional Gaps
UIMVisual Examples
UI Patterns KS Kitchen SinkKRAD
Dev UI Dev UX
Building the UIM
SMEUsers
Validate UIM through
user testing
Rice Jiras KS Jiras
ORMock Code
Our collective knowledge is stored in the UIM.
• UX research informsthe rationale for what we need to build
• Kitchen Sink validates what can be built
• PDT iteration reveals new patterns to validate
Axure is software for wireframing and rapid prototypingof web and desktop applications.
Applying the UIM to Axure widgets
Functional Gaps
Axure LibraryInteractive Widgets
UX
The Axure widget libraries help UX build wireframes quickly.
• Encapsulates KS knowledge of the UI
• Matches current visual design
• Provides higher fidelity interactivity for rapid prototyping
Vision for the Axure Widget Library
Development
Quality Assurance
Collaborative Design
Backlog
Functional Gaps
Axure LibraryInteractive Widgets
Widgets are built in response to design decisions in UIM.
• Reflects current supported function and visual design
• Includes desired (but unsupported) UI behavior
• Requires periodic updates by a UX designer
Building the Axure widget libraries
UX
Functional Gaps
UIMVisual Examples
UX
Dev
The State of the UIM
New Platform
Rice Platform (KRAD)Google Web Kit
June 2012
KD12 “Finished”Initial UIM
Futu
re
Desired
Validated
# Pa
tter
ns &
Com
pone
nts
Gap
2009
UI D
evel
oper
s
The State of Axure widget libraries
New Platform
Rice PlatformGoogle Web Kit
June 2012
KD12 “Finished”Initial UIM
Desired
Validated
# Pa
tter
ns &
Com
pone
nts
Futu
re
Gap
• UCD methods must fit into Agile development process
• UIM and Axure widgets encapsulate knowledge for quick design & prototyping
• Functional gaps in the UI framework must be well managed
For a good user experience in KS
• “Finish” the UIMDocument what we want/know
Dedicated UI Developer resources
• More user input as part of the processIncorporate user research into methodology
Evaluate UIM patterns with real users
Next Steps