Steps to Create

Personas

1 2/13/2018
 Interaksi Manusia dan Komputer
(IMK)

THE USER INTERFACE

(UI)
DESIGN PROCESS

Step 2 – Understand
The Business
Function

2 2/13/2018
Tujuan
Setelah mengikuti materi ini mahasiswa dapat:
1. Memahami pentingnya mengetahui fungsi bisnis
berdasarkan Persona user sebagai acuan dalam
merancang antarmuka perangkat lunak.
2.Mengerti dan menerapkan setiap tahapan dalam
mengidentifikasi alur kerja setiap task
berdasarkan Persona User.

3 2/13/2018
General Step
1. Perform a business definition and requirements analysis.
2. Determine basic business functions.

3. Describe current activities through task analysis.

4. Develop a conceptual model of the system.

5. Establish design standards or style guides.

6. Establish system usability design goals.

7. Define training and documentation needs.

4 2/13/2018
 What is User Experience
– Video01
– Video02

5 2/13/2018
1. Perform a business definition and requirements
analysis
The Objectives of this phase is to establish the need for a system.

A product description is developed and refined, based on input from users,

marketing, or other interested parties.

The developer should be aware of the policies and work culture of the
organization.

Method of collection :
– Data gathering is important part of the requirements discovery process in
interaction design.
– Data collection includes observation and elicitation methods.
– Observation methods allow the designer to immerse themselves in user’s
environment in their day-to-day activity by watching them but users don’t
participate directly with the HCI designer.
– Elicitation methods require user’s participation and include direct and indirect
methods such as interview, focus groups, and quistionnaire

6 2/13/2018
Methods to Collect Required Data
Direct Observation
Questionnaire
Interview
Focus group discussion and brainstorming

• Please explain what are their advantages and disadvantages respectively

All of them can be performed using online media

7 2/13/2018
An Example: Marjorie Bannet
Goals
– To not be lonely
– Keep in touch with her sons and their
families
– Avoid frustrating technology
experiences!
– Not be reliant one anyone

15
2. Determine basic business functions
A detailed description of what the product will do is prepared

Major system functions are listed and described, including

critical system inputs and outputs

The process :
– Gain a complete understanding of the user’s mental model based
upon
 The user’s needs and the user’s profile
 A user task analysis.
– Develop a conceptual model of the system based upon the user’s
mental model, including :
 Defining objects
 Developing metaphors.
16 2/13/2018
Mental Model
Is an internal representation of a person’s current
conceptualization and understanding of something

Mental models are gradually developed through experience,

training, and instruction

Enable a person to understand, explain, and do something

Mental models enable a person to predict the actions

necessary to do things if the actions have been forgotten or
have not yet been encountered.

17 2/13/2018
 Ilustrasi:
https://www.smashingmagazine.com/2012/04/mental-model-diagrams-cartoon/
2/13/2018
18
 Contoh

https://www.crazyegg.com/blog/how-to-design-mental-models/
 Contoh

https://www.crazyegg.com/blog/how-to-design-mental-models/
Contoh https://www.crazyegg.com/blog/how-to-design-mental-models/
Contoh https://medium.com/@workatplay/how-to-create-an-audience-mental-model-fb5ee03a7c7f
3. Task Analysis
Task Analysis is a set activities that change the systems from initial
state to a specified goal or desired outcome state.
The outcome may involve a significant change to the current state,
so we split tasks into a sequence of subtask, each more simple
than the parent task.
Rees(2001) propped a list of activities in order to conduct task
analysis and are described below :
– Gathering information from observation of and/or consulting with user.
– Representing tasks in a task description notation
– Performing an analysis of the task descriptions to achieve an optimum
description
– Using the task representation to produce a new user interface design or
improve an existing one
Other tools : ishikawa diagram, Use cases, Story boarding, Primary
stakeholder profiles.

23 2/13/2018
Hierachical Task Analysis (HTA)
The most popular techinique used for this type of analysis is
the Hierarchical Task Analysis (HTA) tool.

24 2/13/2018
Contoh HTA

25 2/13/2018
Contoh HTA

26 2/13/2018
Contoh HTA

27 2/13/2018
28 2/13/2018
Bahan Bacaan
Hierachical Task Analysis (HTA)
1. https://www.uxmatters.com/mt/archives/2010/02/hierarchical-task-analysis.php
2. http://cehdclass.gmu.edu/ndabbagh/Resources/IDKB/hierarchical_analysis.htm
3. http://www.taskarchitect.com/blog/what-is-hierarchical-task-analysis
4. http://www.taskarchitect.com/blog/when-should-i-use-task-analysis
5. http://www.taskarchitect.com/blog/when-to-stop-breaking-down-task-in-hierarchical-task-analysis
6. http://disi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=teaching:bolzano:taskanalysis.pdf

The 7 Steps of Hierarchical Task Analysis

1. Part 1 http://www.taskarchitect.com/blog/7-steps-hierarchical-task-analysis
2. Part 2 http://www.taskarchitect.com/blog/the-7-steps-of-hierarchical-task-analysis-part-2
3. Part 3 http://www.taskarchitect.com/blog/the-7-steps-of-hierarchical-task-analysis-part-3
4. Part 4 http://www.taskarchitect.com/blog/the-7-steps-of-hierarchical-task-analysis-part-3-0
5. Part 5 http://www.taskarchitect.com/blog/the-7-steps-of-hierarchical-task-analysis-part-3-0-0
6. Part 6 http://www.taskarchitect.com/blog/hierarchical-task-analysis-part-6
7. Part 7 http://www.taskarchitect.com/blog/7-steps-of-hierarchical-task-analysis-part-7
8. Final  http://www.taskarchitect.com/blog/7-steps-of-hierarchical-task-analysis-final

29 2/13/2018
CHALLENGE
Create a HTA by your group
– Online ojek application, consisted of booking/reservation
until rating system
– Graveyard information system, consisted of booking,
payment, until post-sales service
– Driving lisences examination, consisted of registration
until issuing

30 2/13/2018
4. Developing a conceptual model
Is the general conceptual framework through which the system’s
functions are presented.
Describes how the interface will present objects, the relationships
between objects, the properties of objects, and the actions that
will be performed.
A conceptual model is based on the user’s mental model.
The goal : to facilitate for the user the development of a useful
mental model of the system.
Several tools for conceptual design : brainstorming, card sort,
personas, scenarios, semantic networks and cognitive
walkthroughs.
31 2/13/2018
Guidelines Designing Conceptual Models
Reflect the user’s mental model, not the designer’s
Draw physical analogies or present metaphors
Comply with expectancies, habits, routines, and stereotypes
Provide action-response compatibility
Make invisible parts and processes of a system visible
Provide proper and correct feedback
Avoid anything unnecessary or irrelevant
Provide design consistency
Provide documentation and a help system that will reinforce the conceptual
model
Promote the development of both novice and expert mental models

32 2/13/2018
Defining Objects
Determine all objects that have to be manipulated to get work
done. Describe
– The objects used in tasks.
– Object behavior and characteristics
– The relationship of objects
– The actions performed
– The objects to which actions apply
– Information or attributes that each object in the task must preserve,
display, or allow to be edited

Identify the objects and actions that appear most often in the
workflow

Make the several most important objects very obvious and easy to
manipulate

33 2/13/2018
Developing Metaphors
A metaphor is a concept where one’s body of knowledge
about one thing is used to understand something else

Guidelines :
– Choose the analogy that works best for each object and its actions
– Use real-world metaphors
– Use simple metaphors
– Use common metaphors
– Multiple metaphors may coexist
– Use major metaphors, even if you can’t exactly replicate them visually
– Test the selected metaphors
34 2/13/2018
Example:
http://2galsspeechpro
ducts.blogspot.co.id/2
012/12/figurative-
language-fun.html

35 2/13/2018
Graphic Organizer

36 2/13/2018
Example
http://asktog.co
m/atc/principles-
of-interaction-
design/

37 2/13/2018
Metaphor Supplementary
http://www.katalinszabo.com/metaphor.htm
http://ecog.info/gerv/Resume/MS_in_IT_files/CO
MM6960Assignment2.pdf
http://www.diku.dk/OLD/undervisning/2003f/mult
imedie/modul4/MOTEvaluation.pdf
http://courses.cs.washington.edu/courses/cse595
/98wi/metaphor.html
http://www.ics.uci.edu/~kobsa/courses/ICS104/c
ourse-notes/metaphors.htm
38 2/13/2018
The User’s New Mental Model
When the system is implemented, a person interacts with
the new system and its interface.
– If the designer has correctly reflected the user’s mental model in
design: the user’s mental model is reinforced and a feeling that
the interface is intuitive will likely develop
– if the new system does not accurately reflect the user’s existing
mental model : the results include breakdowns in understanding,
confusion, errors, loss of trust, and frustration  an inability to
perform the task or job

If there was a gap between conceptual model and mental

model, then tried to bridge this gap through extensive
documentation and training.

39 2/13/2018
 Mental Model Supplementary:
http://okcancel.com/archives/article/2005/08/mental-model-building-
step-by-step.html

2/13/2018
40
 The distance
between the
mental models
of the designer,
the user and
the evaluator
http://cirrie.buffalo.edu/encycloped
ia/en/article/277/

41 2/13/2018
5. Establish design standards or style guides.
In interface design it describes the appearance and
behavior of the interface and provides some guidance
on the proper use of system components.

It also defines the interface principles, rules,

guidelines, and conventions that must be followed in
detailed design

It will be based on the characteristics of the system’s

hardware and software, the principles of good
interface and screen design

42 2/13/2018
Value of Standards and Guidelines
To Users :
– Allow faster performance
– Reduce errors
– Reduce training time
– Foster better system utilization
– Improve satisfaction
– Improve system acceptance
– Reduce development and support costs

To System Developers :
– Increase visibility of the human-computer interface
– Simplify design
– Provide more programming and design aids, reducing programming time
– Reduce redundant effort
– Reduce training time
– Provide a benchmark for quality control testing

43 2/13/2018
Business System Interface Standards, Guidelines, and
Style Guides
1981 : The first text to present a compilation of interface
and screen design guidelines was that of Galitz (1981).

1986 : The United States Air Force released a set of design

guidelines for its user interface designers
Commercial Style Guides
Apple Human Interface Guidelines for the Macintosh
http://developer.apple.com/documentation/UserExperience/
Conceptual/OSXHIGuidelines
IBM Ease of Use Web site
www-03.ibm.com/easy/page/558
Microsoft Windows XP User Interface Guidelines
http://www.microsoft .com
Sun Microsystems Java Look and Feel Design Guidelines
http://java.sun.com/products/jlf/ed2/book/HIGTitle.html

44 2/13/2018
UI Standard
A user interface standard is an official set of
internationally agreed-upon design approaches
and principles for interface design.
– ISO 9241: Ergonomic requirements for office work with visual display
terminals
– ISO 14915: Software ergonomics for multimedia user interfaces
– ISO 13407: Human-centered design processes for interactive systems
– ISO/CD 20282: Ease of operation of everyday products

45 2/13/2018
Web Guidelines and Style Guides
There has not been an opportunity for conventions and
style guides to be properly developed and then
accepted by the development community

De facto standards are being established when an

overwhelming majority of big sites focus on one way to
do something

Worldwide standards are also being looked at by

organizations such as the World Wide Web Consortium
(2001)

46 2/13/2018
Customized Style Guides
Include checklists to present principles and guidelines.
Provide a rationale for why the particular guidelines should be
used.
Provide a rationale describing the conditions under which various
design alternatives are appropriate.
Include concrete examples of correct design.
Design the guideline document following recognized principles for
good documen design.
Provide good access mechanisms such as a thorough index, a table
of contents, glossaries, and checklists.

47 2/13/2018
6. Establish system usability design goals.

Use all available reference sources in creating the

guidelines.

Use development and implementation tools that

support the guidelines.

Begin applying the guidelines immediately

48 2/13/2018
7. System Training and Documentation Needs
Training
– System training will be based on user needs, system conceptual design, system
learning goals, and system performance goals.
– Training may include such tools as formal or video training, manuals, online
tutorials, reference manuals, quick reference guides, and online help.

Documentation
– System documentation is a reference point, a form of communication, and a more
concrete design — words that can be seen and understood.
– It will also be based on user needs, system conceptual design, and system
performance goals
– Creating documentation during development progress will uncover issues and
reveal omissions that might not otherwise be detected until later in the design
process.
– Any potential problems can be identified and addressed earlier in the design
process, again reducing later problems and modification costs.

49 2/13/2018
2/13/2018
50
Role Play
7 orang Perwakilan kelompok sebagai user
Sisanya sebagai designer
Menentukan komponen yang akan diobservasi
Observasi
Menentukan proses bisnis hasil perbaikan
 Interaksi Manusia dan Komputer
(IMK)

THE USER INTERFACE

(UI)
DESIGN PROCESS

Step 3 – Understand the

Principles of Good
Interface and Screen
Design
52 2/13/2018
Tujuan
Setelah mengikuti materi ini mahasiswa dapat:
1. Memahami prinsip design interaksi.
2.Menerapkan prinsip design interaksi dalam
merancang antarmuka perangkat lunak untuk
menghasilkan antarmuka perangkat lunak yang
baik.

53 2/13/2018
A well-designed interface and screen
Mencerminkan kemampuan, kebutuhan, dan
tugas penggunanya. Dikembangkan dalam
batasan fisik yang dipaksakan ditampilkan oleh
perangkat keras.
Memanfaatkan kemampuan perangkat lunak
pengendalian secara efektif.
Mencapai tujuan bisnis dari sistem yang
dirancang.

54 2/13/2018
Human Considerations in Interface and Screen
Design
Cara Mencegah Timbul Masalah dari Pengguna
Semua gangguan dan hal yang menyebabkan putus asa harus
dihilangkan dalam desain.

Apa yang Pengguna Inginkan

Arah yang diinginkan adalah menuju kesederhanaan, kejelasan,
dan dimengerti

Apa Pengguna Lakukan

Ketika berinteraksi dengan komputer, pengguna:
– Mengidentifikasi tugas yang harus dilakukan atau kebutuhan yang harus dicapai
– Memutuskan bagaimana tugas akan diselesaikan atau kebutuhan terpenuhi.
– Komputer Memanipulasi kontrol.
– Mengumpulkan data yang diperlukan atau konten sementara menyaring data yang
bermakna.
– Bentuk penilaian menghasilkan keputusan yang relevan dengan tugas atau
kebutuhan.

55 2/13/2018
Interface Design Goals
Reduce visual work.
Reduce intellectual work.
Reduce memory work.
Reduce motor work.
Minimize or eliminate any burdens or instructions
imposed by technology.

56 2/13/2018
Three basic design principles (Rees,2001)
1. Consistency
– Is property that makes an interaction predictable from the user’s perspective.
– Two basic rules consistency :
 First, the interface must show consistency in the label used for it.
 Second, that all user actions must be reversible; in other words, everything must have an
“undo” feature.

2. Simplicity
– Show no more than is needed to achieve the desired user goal
– Require a minimum of input from the user
– Keep both the user and the task in focus
– Make important concepts particularly clear
– Use visual representations with direct manipulation (Where possible)
– Clarity is important to achieve simplicity : information representation, organization and naming of
interface control, flow of control (dynamic behavior), Screen layout

57 2/13/2018
Three basic design principles (Rees,2001) Cont.
3. Context
Context refers to ability that the interaction should appear as
sequence identifiable and distinct interface views. Contextual visibility
can be incorporated into an interaction with three major tools :
1. What-you-see-is-what-you-get (WYSIWYG) : technical slang for representing
information on the screen in the identical form(within display constraint) as it will
appear in other media(such as paper and audio/visual). This includes both text
and images-drawing, pictures, and (given the technology) moving images and
sound.
2. Properties. Each visual object possesses a range of attributes(size, shape, color,
and other parameters) that can be controlled by user. This property information
appears on the screen in property boxes.
3. Dialogs. Whenever small amounts of information (text, number, option, yes/no)
must be solicited from the user, use a minor variation on the interface view
known as a dialog box. This disappears when the input is achieved.

And many other more sophisticated principles from Shneiderman,

Mayhew, IBM.
58 2/13/2018
CHALLENGES
You will propose itinerary to Ternate using
airplane through these websites
– Traveloka
– Pegipegi
– Citilink
– Garuda Indonesia
– Lion Air

By three criteria above, compare and criticize

those websites applications

59 2/13/2018
User interface design guidelines
Many of the guidelines refer to character-based screens, but
include many guidelines for the GUI. The guidelines can be split
into six sections that are still valid today :
1. Data Entry
2. Data display
3. Sequence control
4. User guidelines
5. Data transfer
6. Data protection

Another important guideline used in industry is the GNOME

(Human Interface Guidelines (HIG))
http://library.gnome.org/devel/hig-book/stable/) serta guidelines
lain yang telah disampaikan pada pertemuan sebelumnya.

60 2/13/2018
Bahan bacaan
http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/i
nt_design.html

https://developer.gnome.org/hig/stable/

http://www.ambysoft.com/essays/userInterfaceDesign.html

http://bokardo.com/principles-of-user-interface-design/

61 2/13/2018
 Tugas
Contoh pengacuan dan penulisan daftar pustaka/referensi

Unified Modeling Language (UML) adalah himpunan struktur dan teknik untuk
pemodelan desain program berorientasi objek (OOP) serta aplikasinya. UML adalah
metodologi untuk mengembangkan sistem OOP dan sekelompok perangkat untuk
mendukung pengembangan sistem tersebut. UML mulai diperkenalkan oleh Object
Management Group, sebuah organisasi yang telah mengembangkan model,
teknologi, dan standar OOP sejak tahun 1980-an. Sekarang UML sudah mulai
banyak digunakan oleh para praktisi OOP. UML merupakan dasar bagi perangkat
desain berorientasi objek dari IBM. [3]

Daftar Pustaka:

[1]...

[2]...

[3] S. M. R. F. Simmon Bennett, 2002, Object-Oriented System Analysis And Design

Using UML Second Edition, The McGraw-Hill Companies.
62 2/13/2018