[go: up one dir, main page]
Scribd
Upload
28 views27 pages

4 The HCI Design1

Uploaded by

iancarl.jablo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
28 views27 pages

4 The HCI Design1

Uploaded by

iancarl.jablo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

The HCI Design

IT 116 Human Computer Interaction


The Overall Design
Process
The Overall Design
Process
User analysis:
 This involves understanding the
specific tasks users will perform using
the interface.
Task analysis:
 Focuses on the characteristics of the
task, such as the user's actions,
motivations, and goals.
The Overall Design
Process
Requirements analysis:
 Functional - Task:
 This involves ensuring the interface
fulfills the functional requirements
identified during task analysis.
 Functional - UI:
 This involves ensuring the interface
elements function correctly.
The Overall Design
Process
Requirements analysis:
 Nonfunctional - UI:
 This refers to designing the interface
according to non-functional requirements,
such as usability and accessibility.
The Overall Design
Process
Scenario and Storyboarding:
 Mockup/Storyboarding:
 Here, you create a visual representation
of the interface layout and how users will
navigate through it.
 Interface Selection:
 This involves choosing the appropriate
interface components based on the user
needs and functionalities required.
The Overall Design
Process
Scenario and Storyboarding:
 Envisioning:
 This involves brainstorming and coming
up with initial ideas for the interface
design.
 Rough Appearance:
 This refers to creating a basic visual
representation of the interface layout.
The Overall Design
Process
Implementation:
 This involves choosing the tools and
technologies that will be used to develop
the interface, and coding required to
create the interface’s functionalities.
Testing:
 This stage involves usability testing
where users interact with the interface to
identify any usability issues.
Site Map
A site map shows the relationships
between different pages or
screens, but it doesn't focus on the
visual design or layout.
Wireframe
It focuses on the skeletal structure,
functionality, and user flow,
without getting bogged down in
visual details like colors or fonts.

This is a low-fidelity mockup


of an interface layout.
Storyboard
It tells a story of how a user
interacts with the interface,
showcasing each step of the
process in a sequence of panels.
Prototype
Allow users to interact with the
interface elements, Buttons and
Menus to get a feel for how the
final product might work.
Prototype (Low Fidelity)
Think of it as a rough sketch.
 These prototypes are basic and focus
on conveying the core functionality
and layout of the interface.
 They typically use simple shapes,
lines, and text to represent UI
elements like buttons, menus, and
content areas.
Prototype (High Fidelity)
Close representation of the final
product.
 highly detailed and incorporates most
of the visual design elements and
functionalities of the final interface.
 include colors, fonts, icons, and other
visual design elements, providing a
more realistic look and feel of the
final product.
Summary
“Naïve” Design Example: No Sheets
1.0

The main purpose of this application is


to use the smartphone to present sheet
music, eliminating the need to handle
paper sheet music.
“Naïve” Design Example: No Sheets
1.0
“Naïve” Design Example: No Sheets
1.0
“Naïve” Design Example: No Sheets
1.0

Requirement Analysis
 Understand the purpose of No Sheets
1.0.
 What problem does it solve?
 Who are the target users?
 Identify key features and
functionalities required.
“Naïve” Design Example: No Sheets
1.0

Requirements Analysis
“Naïve” Design Example: No Sheets
1.0

User Analysis
 Profile potential users. Consider their
backgrounds, tasks, and preferences.
 Understand their
pain points related
to spreadsheets.
“Naïve” Design Example: No Sheets
1.0

Making a Scenario and Task


Modeling
 Create scenarios that depict typical
user interactions with No Sheets 1.0.
 Model specific tasks, such as data
entry, calculations, and visualization.
“Naïve” Design Example: No Sheets
1.0

Making a Scenario and Task


Modeling
“Naïve” Design Example: No Sheets
1.0

Making a Scenario and Task


Modeling
“Naïve” Design Example: No Sheets
1.0

Wire framing
 Develop low-fidelity wireframes.
These are basic visual representations
of the application's layout and
components.
 Focus on simplicity and clarity.
“Naïve” Design Example: No Sheets
1.0

You might also like