This document outlines Suhas Sudhakaran's presentation on delivering effective user interfaces using a process-driven approach. The presentation covers key topics such as the difference between user experience and user interface, components of UI and UX, characteristics of usable interfaces, benefits of usability, defining user-centered design, the art and science of interfaces, models for user-centered design, defining a UI design process, and factors for effective visual design and interface evaluation. The presentation provides an overview of the concepts and steps involved in designing effective user interfaces through a user-centered process.

1. DELIVERING
EFFECTIVE
USER
INTERFACES
- A PROCESS DRIVEN APPROACH
JANUARY MEET-UP, PRODUCT CAMP SG
BY SUHAS SUDHAKARAN
29TH JAN, 2015

2. - 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

3. • 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

4. UX IS NOT UI

5. UX IS THE OVERALL FEEL
The Becker JetVan is built to make you feel like you are on a private jet

6. 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

7. 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

8. 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

9. 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

10. 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

11. SCIENTIFIC MODELS FOR
USER-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

12. DEFINING A UI DESIGN
PROCESS
Requirement
Analysis
User Centered
Analysis
UI Design
Conceptualizing
Applying Design
Elements and
Principles
Prototype
Evaluate, Iterate
Freeze
and Approve
Specification
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

13. THE ART, BEAUTY AND TASTE OF
INTERFACES

14. 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

15. 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

16. LAYOUT
• Points, lines and
Planes
• Divided,
Undivided and
Equal Planes
• Visual Processing
• Grid systems
• Data Density
• Visual Processing

17. 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

18. GRAPHICS
• Create Appropriate and
contextual to user personas,
Branding and perceptions
• Images
• Icons
• Banners
• Buttons
• Consistency
• Familiarity – reduce
ambiguity
• Communicate for Actions

19. TEXT
• Font Style, size…
• Font Treatment like
underline, bold
• Set Subtle and Strongest
• Create Legibility
• Proper Alignment
• Optimum Line Length

20. 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

21. INTERACTION
• Visual Hints for action
• Task States : Active, Disabled
• Progress Indicators
• Provide Intuition
• Appropriate Data Input
• Selections
• Action Buttons

22. 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

23. EA
PM/Stakehold
ers
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

24. QUESTIONS

25. Name:
E-Mail:
THANK YOU
Suhas Sudhakaran
t.suhas.s@gmail.com