UI & UX for TEL systems
Sameer Sahasrabudhe
Senior Project Research Scientist
Dept of Computer Science and Engineering
IIT Bombay
Form
OVER
Function
TPC
Content
Pedagogy
Technology
Design
Visual design
Interaction design
Basic Principles
Coherence: Avoiding extraneous elements
Affordance: Elements present possible interactions
Feedback: Visibility and Constraints
Appeal: Focal point, Proximity, Continuation/Similarity
Coherence
Create User profiles
1. Identify the user attributes (it can be a range)
1. Identify the user attributes (it can be a range)
AgeAcademic backgroundJob titleTasks performed using your tool
2.
PROCESS OF INTERACTION DESIGN
1. Identifying needs and establishing requirements
2. Developing alternative designs that meet those requirements.
3. Building interactive versions of the designs so that they can be communicated and assessed.
4. Evaluating what is being built throughout the process
1. Identifying needs and establishing requirements
2. Developing alternative designs that meet those requirements.
3. Building interactive versions of the designs so that they can be communicated and assessed.
4. Evaluating what is being built throughout the process
Understanding
problem space
Asking the users if the product will address their problems
Getting feedback
Knowing the details of the problems they have
Understanding the problem
Example: Problems carpenters face with a measuring tape
Understanding the problem
Example: Problems with a measuring tape
Version 1 Version 2
Think - Pair - Share
Understanding the problem
Example: Problems with a measuring tape
Version 1 Version 2 Version 3
Think - Pair - Share
What interaction is added?
Tape with marking facility!
What interaction is added?
Digital tape
What interaction is added?
Digital measuring tape with laser beam and a display
More advanced?
How has our navigation evolved?
Refer Maps
Ask people
Remember landmarks
Make Calls
Sign boards
----------------------------------------------------
Kiosks
You are here.
But where is this place?
How has our navigation evolved?
What has changed in this interaction?
Where is this going?
Matt Sclarandis’s Weather App Wireframe on Behance
Where is this going?
Marc Caldwell’s Logic ‘n’ Flow wireframe series on Dribbble
Conceptual models
Description of the system in terms of
-
set of integrated ideas
-
what should it do, behave, and look like
This description should be understandable by the users
in an intended manner
in an intended manner
Conceptual models
Two main types:
-
based on activities
-
based on objects
CONCEPTUAL MODELS
based on Activities
-
Instructing
-
Conversing
-
Manipulating and navigating
-
Exploring and browsing
CONCEPTUAL MODEL: Instructing
Accessing the information/getting the result
by instructing the system
Examples
Issue instruction to the system to perform a task (Print a page)
Reminder for appointments (Wake me up at 6:30 AM)
Preferable for repetitive tasks
Issue instruction to the system to perform a task (Print a page)
Reminder for appointments (Wake me up at 6:30 AM)
Reminder for appointments (Wake me up at 6:30 AM)
Preferable for repetitive tasks
CONCEPTUAL MODEL: Conversing
Converse with the system to get information/result
Examples
Train time inquiry system
Search engines
Train time inquiry system
Search engines
Preferable when user needs specific kind of information
CONCEPTUAL MODEL:
Manipulating and Navigating
Navigate within the system using the knowledge of the user about the objects in physical world
Examples
Computer Desktop screen
Solitare card game
Physical action of button pressing instead of giving
command/asking a query (complex syntax)
Computer Desktop screen
Solitare card game
Solitare card game
Physical action of button pressing instead of giving
command/asking a query (complex syntax)
CONCEPTUAL MODEL:
Browsing and Exploring
Search, browse, and find different kind of information
Examples
Train time inquiry system
Search engines
Preferable when user needs specific kind of information
Train time inquiry system
Search engines
Search engines
Preferable when user needs specific kind of information
CONCEPTUAL MODELS
based on Objects
Focus is on the way a particular object is used
in a specific context
Example: Ledger for recording data
CONCEPTUAL MODELS
based on Objects
Focus is on the way a particular object is used
in a specific context
Example: Ledger for recording data
Focus is on the way a particular object is used
in a specific context
Example: Ledger for recording data
CONCEPTUAL MODELS
based on Objects
Focus is on the way a particular object is used
in a specific context
Example: Ledger for recording data: SPREADSHEETs
Development process
Ideate
Create (Prototype)
Test
Get feedback
Analyse
Modify
DEVELOPMENT PROCESS
Ideate
Create (Prototype)
Test
Get feedback
Analyse
Modify
.
Thank you
ssameers.wordpress.com
samss@it.iitb.ac.in
Facebook: sameerss23
Twitter: iamsameerss