Embed Size (px)
Citation preview
DELIVERING EFFECTIVE USER INTERFACES- A PROCESS DRIVEN APPROACH
JANUARY MEET-UP, PRODUCT CAMP SG
BY SUHAS SUDHAKARAN
29 T H JAN, 2015
- User Experience Specialist
- 17 years of Designing Experience
- Specialization:o Framing User Centric design methodologies and Concepts
o Usability Analysis
o Information Architecture
o Human Computer Interaction
o UI/Visual Designing
- Companies and Clients
SUHAS SUDHAKARAN
• UI & UX
• Components of User Interface
• Characteristics and Benefits of Usable Interfaces
• User-Centered Design
• The Art and Science of Effective Interfaces
• Scientific models for User-Centered Designs
• Defining a UI Design Process
• Giving life to interfaces
• UI Evaluation
• Q & A
AGENDA
UX IS NOT UI
UX IS THE OVERALL FEEL
The Becker JetVan is built to make you feel like you are on a private jet
COMPONENTS OF UI & UX
User Experience
User Interface• Navigational container• Navigational mechanism• Graphical Elements• Layouts• Color• Text• Data Inputs• Persuasion• Branding elements• Content Tone and Voice• Interaction
• Visual Cognitive Processing• Feelings and Emotions• Meeting Expectations• Visual Affordance
• Performance• Efficiency• Effectiveness• Overall Satisfaction• Learnability• Memorability
CHARACTERSTICS OF AN USABLE INTERFACE
• Easy to learn
• Achieving what is needed by using the product
• Efficiency in completing tasks
• Easy to remember
• Consistent
• Intuitive, deducible, self-evident, encourages and motivates
• Meets expectations
BENEFITS OF AN USABLE INTERFACE
• Reduce Mental load
• Reduce Training
• Increase Satisfaction while completing goals
• Increase Product Recognition
• Ensure Right Brand Perception
• Increase Loyalty
• Increased Cost Savings and Profitability
DEFINING USER-CENTERED DESIGN“The active involvement of users and a clear understanding of user and task requirements;
An appropriate allocation of function between users and technology;
The iteration of design solutions;
multi-disciplinary design."
- ISO 13407
• User profiling, personas, task scenarios
• User interviews, Usability testing
• Understanding devices used, Technology
• Building Concepts, Prototypes, Evaluation
• UX and UI/Visual Designers, Developers, Managers, Project leaders, Marketing
THE ART AND SCIENCE OF EFFECTIVE INTERFACES
ART
Includes levels of subjectivity
- Feeling
- Emotions
- Aesthetics
- Personal taste and view
SCIENCE
Includes levels of Objectivity
- Applying research and findings
- Requirement gathering & Analysis
- Information Architecture
- Trying to Achieve, reach or Capture
SCIENTIFIC MODELS FORUSER-CENTERED DESIGNING
VISUAL
INTELLECT
MEMORY
MOTOR
Optimize visual comprehension by
Design PrinciplesVIMM System
Simplify Decision making by
Minimize the Memory Load by
Bring Effectiveness and Efficiency in movement and Interactions by
• Matching screen flow to task flow• Effective Visual Cognitive processing• Best use of colors, grouping and labeling
• Persuasion models• Consistency in controls and Navigation• Providing good System Feedback
• Consistency in Presentation, behavior and Interaction
• Designing for recognition vs recall• Providing defaults and remembering user
interactions
• Using Short distances and long targets• Using Natural response mappings• Reduce task steps• Optimize for data input methods
DEFINING A UI DESIGN PROCESS
Requirement Analysis
User Centered Analysis
UI Design Conceptualizing
Applying Design Elements and Principles
Prototype Evaluate, Iterate
Freeze
and ApproveSpecification and Guidelines
• User Research • Task Analysis and prioritization• Information Architecture
• Product Vision• Business• Stakeholders• Marketing • Branding• Target Users• Technology and
Devices
• Storyboarding• Screenplay to the
concepts• Navigation methods• Content
• Layout• Graphics• Colour• Text• Data Inputs• Persuasion• Brand elements• Content Tone and Voice• Interaction
• Low Fidelity• High Fidelity• Visual Affordance• Navigation• Brand Perception• Emotions• Expectations• Interactions
• Time• Design Cycles• Cost
• Navigation• Presentation• Interaction• Behaviors• Default s
THE ART, BEAUTY AND TASTE OF INTERFACES
FACTORS FOR EFFECTIVE VISUAL DESIGNS
• Are the visual elements clearly interpretable?
• Is the Layout simple or complex
• Are the colors and Typography used effectively reflects the brand, mood and emotions
VISUAL- COGNITIVE PROCESSING
USABLE NAVIGATION METHODS
• Usable Navigation is Obvious
• Creating the ability for an user to find relevant content efficiently
• Determine the Primary Navigation System• Persistent or Sequential• Hierarchical• Search
• Derive Navigation systems from User Profilers, Personas, Task Scenarios, IA
• Use UI Design Storyboards to derive efficient and effective Navigations
• Around 80% of Usability is determined by the interface structure or the Navigational Container
LAYOUT
• Points, lines and Planes
• Divided, Undivided and Equal Planes
• Visual Processing
• Grid systems
• Data Density
• Visual Processing
COLORS
• Reinforce Brand attributes
• Relate Emotions and Mood
• Provide Natural Grouping cues
• Show Relationships in content presented
• Determine Dominancy and Sub dominancy
• Communicate for Actions
GRAPHICS
• Create Appropriate and contextual to user personas, Branding and perceptions
• Images
• Icons
• Banners
• Buttons
• Consistency
• Familiarity – reduce ambiguity
• Communicate for Actions
TEXT
• Font Style, size…
• Font Treatment like underline, bold
• Set Subtle and Strongest
• Create Legibility
• Proper Alignment
• Optimum Line Length
CONTENT• Writing Style
• Informal or Formal
• Choice of Word and tone
• Reflect Branding
• Speak Users Language
• Clarity and Voice
• Precise
• Meaningful
• Simplicity
• Avoid Spelling Mistakes and Repetition
• Acronyms and Jargons
• Grammar
• Readability
• Persuasion
INTERACTION• Visual Hints for action
• Task States : Active, Disabled
• Progress Indicators
• Provide Intuition
• Appropriate Data Input\
• Selections
• Action Buttons
UI EVALUATION
Low Fidelity Interface Testing• Paper Prototypes• Wireframes• Monochrome (minimal colors)• Test for Navigation and Content• Expectations• Decision making• Visual Affordance
High Fidelity Interface Testing• Running and Functioning Prototype• Test for Navigation and Content• Test for Colors, Graphics, Icons• Test for Brand Perception and Attributes• Expectations• Visual Affordance• Interactions• Persuasion• Emotions
Design
Prototype
Evaluate
EA
PM/Stakeholders
Plant Manager
Line Manager
Line Supervisor
.
.
REQUIREMENT ANALYSIS
USER RESEARCH ANALYSE CURRENT DESIGN INFORMATION ARCHITECTURE
LOW FIDELITY PROTOTYPE
LOW FIDELITY PROTOTYPE – AFTER ITERATIONS
USABILITY TEST 1 REPORT & ANALYSIS
LOW FIDELITY PROTOTYPE – AFTER ITERATIONS
USABILITY TEST 2 REPORT
& ANALYSIS
HIGH FIDELITY PROTOTYPE & DETAILED DESIGN
DESIGN
PROCESS
QUESTIONS
