creating uis n.
Skip this Video
Loading SlideShow in 5 Seconds..
Creating UIs PowerPoint Presentation
Download Presentation
Creating UIs

Loading in 2 Seconds...

play fullscreen
1 / 97

Creating UIs - PowerPoint PPT Presentation

  • Uploaded on

Creating UIs. Planning. How to create a UI?. Plan. Test. Design. How to create a UI?. Step 3. Step 2. Step 1. Design. Test. Plan. How to create a UI?. Step 3. Step 2. Step 1. Design. Test. Plan. Planning Outline. Analyze user and task Consider functionality

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Creating UIs' - dorcas

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
creating uis

Creating UIs


how to create a ui
How to create a UI?




how to create a ui1
How to create a UI?

Step 3

Step 2

Step 1




how to create a ui2
How to create a UI?

Step 3

Step 2

Step 1




planning outline
Planning Outline
  • Analyze user and task
  • Consider functionality
  • Conform to the user’s view
analyze user and task1
Analyze User and Task

The number one principle in design

Focus on the user and their tasks, not the technology.

planning outline1
Planning Outline
  • Analyze user and task
    • Understand User
    • Understand Task
  • Consider functionality
  • Conform to the user’s view
understand the user
Understand the User

Decide  Investigate  Collaborate

understand the user decide
Understand the User: Decide

Who are you developing the software for?

  • You can’t develop a solution for ‘everyone.’
  • Choose a primary target as the intended user base and focus on them.
  • Sometimes customers are different than users.
understand the user investigate
Understand the User: Investigate

Make an effort to learn about potential users

  • Talk to them
  • Observe them in their natural environment
  • Talk to their managers
  • Read about their business
not just novice vs experienced
Not just novice vs. experienced
  • Avoid classifying novice users as people who have never used a computer.
  • Avoid classifying expert users as professional computer engineers.
  • A better approach is using independent ‘knowledge dimensions.’
knowledge dimensions
Knowledge Dimensions
  • General computer savvy – how much a users knows about computers in general
  • Task knowledge – how well does a user perform at the target task
  • Knowledge of the system – how well does the user know the specific/similar software product.
understanding the user collaborate
Understanding the User: Collaborate
  • Don’t treat users as objects to be studied.
  • Treat users as experts in their domain.
understanding the user collaborate1
Understanding the User: Collaborate

Take note of user’s:

  • experience
  • management structure
  • likes
  • dislikes
  • motivation
bringing it all together
Bringing it all together

Decide  Investigate  Collaborate

The goal of these three steps is to create user profiles that describe the intended users of the software.

user profiles
User Profiles

User profiles - A collection of personal data associated to a specific user.

user profiles1
User Profiles

Possible info found in a user profile:

  • Job description
  • Job seniority
  • Education
  • Salary
  • Computer skill level
  • Task/Product skill level
sample user profile
Sample User Profile
  • Name : John Doe
  • Age : 40
  • Profession : Software Engineer
  • Job Description : Android UI Development and meetings to plan/track/improve project.
  • Computer Skill Level : High. Works with computers constantly, uses mobile phones and tablets.
  • Familiarity with task domain : Medium
  • Interaction with task domain :
user model
User Model

User model –the user’s mental understanding of what the program will do for them.

user model1
User Model
  • When someone uses a program, they don’t come with a completely blank slate.
  • Understanding the user’s knowledge dimensions help designers form a picture of the user’s model.
user profiles2
User Profiles
  • Helps designers know what they are aiming at.
  • Helpful for deciding what a user would and wouldn’t do.
  • Help ground judgments about design choices.
  • Basis for usability testing
analyze user and task2
Analyze User and Task

In order to focus on the user and their tasks, one must understand the intended user by asking:

  • For whom is this software being designed? Who are the intended users? Who are the intended customers (not necessarily the users)?
  • What is the software for? What activity is it intended to support? What problems will it help users solve? What value will it provide?
  • What problems do the intended users have now? What do they like and dislike about the way they work now?
analyze user and task3
Analyze User and Task

Questions continued:

  • What are the skills and knowledge of the intended users? Are they motivated to learn? How? Are there different classes of users, with different skills, knowledge, and motivation?
  • How do users conceptualize the data that the software will manage?
  • What are the intended users’ preferred ways of working? How will the software fit into those ways? How will it change them?
planning outline2
Planning Outline
  • Analyze user and task
    • Understand User
    • Understand Task
  • Consider functionality
  • Conform to the user’s view
understand the task
Understand the Task

Decide  Investigate  Collaborate

understand the task decide
Understand the Task: Decide
  • Applications are designed to fill a need
  • Decide on an application area:
    • Music
    • Video
    • Social Networking
understanding the task decide
Understanding the Task: Decide

Your application area and target user help yield a specific product category such as,

  • A document editing software for technical writers
  • Banking software for bank tellers.
understand the task investigate
Understand the Task: Investigate
  • Learn from the user
  • Perform a task analysis
task analysis
Task Analysis

Learn as much as you can about exactly how the intended users do the tasks that the software is supposed to support.

how to perform a task analysis
How to perform a task analysis
  • Observe users
  • Interview users
  • Understand how people perform their task
  • Ask users to speculate how they would use your application
observing vs interviewing
Observing vs. Interviewing
  • Observation requires interpretation. Sometimes your interpretation can be wrong.
  • Interviews provide direct explanations, goals, etc. However, sometimes interviews provide misinformation.
task analysis1
Task Analysis

The goal of task analysis is to develop a thorough understanding of the activities the software will support.

example task analysis questions
Example Task Analysis Questions
  • What is your role in (insert task here)?
  • What software do you use to (insert task here)?
  • What is involved in (insert task here)?
a good task analysis can answer the following
A good task analysis can answer the following
  • What goals do users want to achieve by using the application?
  • What set of human tasks is the application intended to support?
  • Which tasks are common, and which ones are rare?
  • Which tasks are most important, and which ones are least important?
  • What are the steps of each task?
  • What are the result and output of each task?
  • Where does the information for each task come from?
a good task analysis can answer the following1
A good task analysis can answer the following
  • How is the information that results from each task used?
  • Which people do which tasks?
  • What tools are used to do each task?
  • What problems do people have performing each task?
  • What sorts of mistakes are common? What causes them? How damaging are mistakes?
  • What terminology do people who do these tasks use?
  • What communication with other people is required to do the tasks?
  • How are different tasks related?

Taken from Designing with Mind in Mind, Chapter 11 Many Factors Affect Learning, Section Task Analysis

a good task analysis can answer the following2
A good task analysis can answer the following
  • The previous 15 questions are great generic questions to help steer task analysis in the right direction.
  • However, they aren’t enough by themselves. You need to dig in and find tasks that are specific to the application domain.
example task analysis for how people prepare a slide show
Example Task Analysis for how people prepare a slide show
  • What is your role in producing slide presentations?
    • Do you produce slides yourself or do you supervise others who do it?
    • How much of your total job involves producing slide presentations?
    • For whom do you produce these slide presentations?
    • What quality level is required for the slides?
    • Do you (your department) follow slide formatting standards?
example task analysis for how people prepare a slide show1
Example Task Analysis for how people prepare a slide show
  • What software do you use to create slide presentations?
    • Who decides what software you use for this?
    • Do you use one program or a collection of them?
    • Do you use general-purpose drawing software or slide-making software?
    • What do you like and dislike about each of the programs you use?
    • What other software have you used, tried, or considered for making slides, either here or in previous jobs?
example task analysis for how people prepare a slide show2
Example Task Analysis for how people prepare a slide show
  • What is involved in making slides?
    • Describe the complete process of producing a presentation.
    • Do you reuse old slides in new presentations?
    • How do you (your department) organize and keep track of slides and presentations?
understanding the task investigate
Understanding the Task: Investigate
  • Think about the application context
    • Where will it be used?
    • Where does input come from?
    • Where does output come from?
  • Don’t get tunnel vision and think only of the user’s computer screen
understand the task collaborate
Understand the Task: Collaborate
  • Generate two-way feedback with users
  • Present preliminary analysis and conclusions to your users and solicit reactions.
  • Encourages better working relations with users and might help gain more reliable data
bringing it all together1
Bringing it all together
  • Understanding the tasks requires the same activities as understanding the user.
  • Both investigations can be conducted at the same time
planning outline3
Planning Outline
  • Analyze user and task
  • Consider functionality
    • Find functionality
    • Develop a conceptual model
    • Perform an Objects and Actions Analysis
    • Define Lexicon
  • Conform to the user’s view
user interface no no
User Interface No No
  • GUI developers often put presentation before functionality. DON’T DO IT!
  • With that said, don’t put off the UI until the very end.
find functionality
Find Functionality
  • Designers should fully define the concepts and their relationships before they design how to present concepts to the user.
finding functionality
Finding Functionality
  • Focus on task-related questions
    • Questions asked during Task Investigation
finding functionality concept visibility
Finding Functionality: Concept Visibility
  • What concepts are visible to the user?
  • Are the concepts recognized from the user’s task domain?
  • Can new concepts be presented as familiar concepts?
finding functionality data
Finding Functionality: Data
  • What data will the user create, view, or manipulate?
  • What information will users extract from the data?
  • Where will the data come from?
  • Where will the generated data be used?
finding functionality options
Finding Functionality: Options
  • What choices, settings, and controls will be provided?
  • This isn’t about how to PRESENT options, but what their role in the application is.

Exp: Day of week, dollar amount, email address, volume level

putting it all together
Putting it all together
  • Taking all the data we have collected about the user, user task, and application functionality, we need to capture and organize all available data.
  • A recommended approach is to design a conceptual modelfor the app.
planning outline4
Planning Outline
  • Analyze user and task
  • Consider functionality
    • Find functionality
    • Develop a conceptual model
    • Perform an Objects and Actions Analysis
    • Define Lexicon
  • Conform to the user’s view
conceptual model
Conceptual Model

A model of an application that designerswant users to understand.

a conceptual model expresses
a Conceptual Model expresses
  • The data users can manipulate
  • How data is organized
  • What users can do with the data
conceptual models explain
Conceptual Models explain
  • The function of the application
  • The concepts users need to be aware of in order to use it effectively
a conceptual model s purpose is
A Conceptual Model’s purpose is
  • To serve as a plan for designing the details of the system
  • To explain to the user how the system works
mental model
Mental Model

The user’sunderstanding of how the system works.

mental model1
Mental Model
  • Not a tangible/visible object that designers can directly interact with
  • User’s might not be able to fully describe it
  • We must observe the user and try to infer what their mental model is
subtle distinction
Subtle Distinction
  • Don’t confuse conceptual model with mental model
mental model2
Mental Model
  • Designers aspire for the conceptual model to match the user’s mental model.
  • Users with a correct mental model are able to predict what the system will do.
benefit of a good conceptual model
Benefit of a good conceptual model
  • Users will be able to use your application efficiently and be able to complete tasks without much effort or thought.
creating a good conceptual model
Creating a good Conceptual Model
  • Concepts for your model should be ideally taken from your task analysis
  • Use familiar concepts that have direct mappings to supported tasks
  • Don’t include implementation details or software architecture
  • Be wary of new/foreign concepts
creating a good conceptual model1
Creating a good Conceptual Model

Imagine that you are designing software for creating and managing organization charts. Is an organization chart:

  • a structure of boxes, box labels, box layout, and connector lines or
  • a structure of organizations, sub-organizations, and employees?
new foreign concepts
New/Foreign Concepts
  • New concepts often occur for tasks which previously were not computerized
  • New concepts come at a high cost
    • Adds a concept that task experts aren’t familiar with and must learn.
    • As concepts are added, the complexity of the system rises.
  • Don’t use foreign concepts that might mislead users
new concepts
New Concepts
  • Use new concepts only when they provide high benefit.
  • Less is sometimes more!
planning outline5
Planning Outline
  • Analyze user and task
  • Consider functionality
    • Find functionality
    • Develop a conceptual model
    • Perform an Objects and Actions Analysis
    • Define Lexicon
  • Conform to the user’s view
objects and actions analysis
Objects and Actions Analysis

A declaration of concepts that an application exposes to the user.

objects and actions analysis1
Objects and Actions Analysis
  • Shows what conceptual objectsare exposed to the user
  • The actionsthat can be performed on each object.
  • The attributes of each object
  • Relationship between objects
objects and actions analysis example
Objects and Actions Analysis Example

Designing an application for a simple office calendar application.


  • Calendar
  • Event
  • To-do-item
  • Person
o a analysis calendar app example
O/A Analysis Calendar App Example


  • Print
  • Create
  • Change
  • View
  • Add Event
  • Delete Event
o a analysis attributes
O/A Analysis: Attributes
  • Metadata for the conceptual object
  • Additional details/characteristics
  • Etc.
o a analysis calendar app example1
O/A Analysis Calendar App Example


  • Calendars have an owner and default focus.
  • Events have a name, description, date, time, duration, and a location.
  • To-do items have a name, description, deadline, and priority.
  • A person has a job-description, office location, phone number.
o a analysis attributes1
O/A Analysis: Attributes
  • Attributes can be used to specify sub-types of a generic object to simplify analysis.

For example, a drawing program would have circles, squares, and triangles as objects that are exposed to users. These could simply be identified as a shapeobject and the attribute typecould specify the specific shape.

objects and actions matrix
Objects and Actions Matrix
  • A matrix which maps objects and actions and the relationships they share.
o a matrix
O/A Matrix


Objects go on the left

o a matrix1
O/A Matrix


Actions go on the top

o a matrix2
O/A Matrix

Attributes (A) of objects are listed beneath the object and are indented.

o a matrix3
O/A Matrix

Relationships show which actions are applicable to objects.

They are shown as checkmarks/X’s

what can o a matrices tell you
What can O/A Matrices tell you?
  • Tall Matrix means many objects to master
  • A wide matrix means many actions to learn
  • A small and dense matrix indicates good design and is easy to learn
  • A large and spare matrix reflects inconsistent design and is hard to learn.

**Don’t take into account attributes when determining the complexity/simplicity of your matrix**

the goal of o a analysis
The Goal of O/A Analysis
  • Validate the conceptual model
  • Weed out inconsistency
  • Identify relationships between objects
  • Identify more/less important tasks
  • Identify the simplicity or complexity of your application.
other o a analysis examples
Other O/A Analysis Examples

See Designing with the Mind in Mind, Chapter 11, Section Objects/actions Analysis for online store customer comments application

Online article by blink @

planning outline6
Planning Outline
  • Analyze user and task
  • Consider functionality
    • Find functionality
    • Develop a conceptual model
    • Perform an Objects and Actions Analysis
    • Define Lexicon
  • Conform to the user’s view
define a lexicon
Define a Lexicon

Define the terminology to be used throughout the software and documentation.

define a lexicon1
Define a Lexicon
  • The lexicon provides names and definitions for each object, action, and attribute.
  • Use vocabulary that is familiar to the user and their tasks.
  • Don’t use vocabulary that is implementation specific.
benefits of a lexicon
Benefits of a Lexicon
  • Prevents designers/developers from using multiple terms for the same concept
  • Helps designers/developers from using the same term for different concepts
  • Promotes clear communication between designers and developers.
bringing it all together2
Bringing it all together
  • Keep conceptual models simple
  • Find common tasks shared by objects.
    • Helps developers reuse code. Designers can then design the same interface for operations across the objects.
  • Identify Importance:
    • Which tasks are absolutely needed and which ones can be removed.
bringing it all together3
Bringing it all together

A good conceptual model will help

Kick start Development: O/A analysis identifies an initial object model for user visible concepts.

Scenarios: A dev team can create scenarios which are helpful in validating design.

planning outline7
Planning Outline
  • Analyze user and task
  • Consider functionality
  • Conform to the user’s view
conform to the user
Conform to the user

User interfaces should be designed from the user’s point of view.

strive for naturalness
Strive for naturalness
  • Using the task analysis, we can see which acts are ‘natural’ to the task domain and which ones are ‘unnatural’.
  • Unnatural acts are steps that have no obvious connection to a goal.
  • Don’t impose arbitrary restrictions on users.
strive for naturalness1
Strive for naturalness
  • Writing software for a chess game, moving a piece in chess should only require knowing:
    • the piece you’re moving and
    • the position you’re moving to. Don’t complicate the task by asking to name the move, making the player switch to move mode, etc.
  • Don’t limit people’s names to 16 characters,
  • Don’t provide undo for only the last 3 actions
use the user s vocabulary
Use the user’s vocabulary
  • Avoid geek speak, computer jargon, or technobabble for text used in software.
  • Use the lexicon you defined. It should match terminology used in the task domain.
  • The words from your lexicon should be found in the conceptual model, software, and help docs.
keep program internals hidden
Keep program internals hidden
  • The UI should represent only concepts that are required to support the task.
  • Design for the convenience of the user, not the developer.
power complexity trade off
Power/Complexity Trade-off
  • People tend to believe the more options, the more controls, the more power, the better.
  • Realistically, people only learn a few features and ignore the rest.
  • Decide which features are important by talking to the user.