Program Studi Independen Bersertifikat “Inovasi Berbasis Teknologi”

USER FLOW, WIREFRAME

AND UI WORK

Alvan Zaputra
 Ideation Stage
Exploring the solution; prioritize features,
visualize the users flow and Information
Architecture framework.
 Information
Architecture
Is about to figure out the best way to organize your
design. It is about organizing the element into
hierarchies of information.

Alvan Zaputra 1
 Information Architecture
Methods:

•User Flows
•Site Map
•Wireframing

Alvan Zaputra 2
 User Flows
User flows also help developers understand how the
system interacts with user behavior. The system needs to
respond to the user when they make errors and do actions.
Developers can view all the details and specifics of an
interaction on a user flow.

Alvan Zaputra 3
 User Flow Example:
Background: before I could start wireframing my app 'Movie
Night' (described elsewhere on this site), I needed to understand how
users would work their way through it. What decisions would they be
making, and what actions would they take? What would they need to
see/where would they need to go from each of these decision points?
Problem: before I could work on designing my app, I had to
understand the tasks users would want to complete, and how they
would 'flow' through my application.
Process: I worked out a text and a visual version of a hypothetical
user's flow through my app. The visual version was put together, in
part, as a way of familiarizing myself with UML.

Result: see next slide!

Alvan Zaputra 4
 Site Map
A hierarchical visual model of the pages of a Web site. Site
maps help users navigate through a Web site that has more
than one page by showing the user a diagram of the entire
site's contents. Similar to a book's table of contents, the site
map makes it easier for a user to find information on a site
without having to navigate through the site's many pages.
Also, in SEO, a site map can make it easier for a search
engine spider to find all a site's pages.

Alvan Zaputra 1
Nice tools to use:

https://timblee.com/
Free trial for 30 days
Nice tools to use:

http://popplet.com/
Free all time
 Wireframing
A wireframe is a two-dimensional illustration of a page’s
interface that specifically focuses on space allocation and
prioritization of content, functionalities available, and
intended behaviors. For these reasons, wireframes typically
do not include any styling, color, or graphics. Wireframes
also help establish relationships between a website’s
various templates.

Alvan Zaputra 5
 Low-Fidelity Wireframes
Low-Fidelity wireframes are generally a very simple place to
start design. They attempt to define navigation, framework
and basic structure. Low-Fidelity wireframes are useful for
starting conversations, deciding very basic functionality as
well as navigation layout. These simple sketches are NOT
as useful for showing actual interactions, the weighting of
elements on a page or paper prototype testing.

Alvan Zaputra 6
Lo-Fi
Wireframes
Tools:

Sketch
on Paper
http://sneakpeekit.com/
 High-Fidelity Wireframes
High-Fidelity wireframes fill in the details missing in their
simpler predecessors. They define the weighting and visual
hierarchy of the page, actual form and interaction elements,
and often labels, instructional text and some copy. They
can be used in sequence to show how a specific task can
be accomplished in a sequence of screens. High fidelity
wireframes should always aspire to defining all product and
interaction details.

Alvan Zaputra 7
 Hi-Fi Wireframes
Tools:

Premium

www.axure.com www.balsamiq.com www.justinmind.com www.hotgloo.com

Freemium

www.moqups.com www.mockplus.com www.wireframe.cc

 Hi-Fi Wireframes
Tools:

www.adobe.com www.sketchapp.com www.figma.com

$6.9 / month $99 Free
Free Trial 1 Free Trial 1 Until december 2016
month Mac & month Mac only Web App
Windows
 Rapid Paper Prototyping
Rapid Paper Prototyping (RPP) falls into the category
of a low-fidelity prototyping. It takes the bare
minimum amount of details to create a functional
interface so potential users can test it. It is great for
getting early feedback on your product without
writing a line of code or creating a mock up.

Alvan Zaputra 8
Alvan Zaputra 9
 What isUI ?

Alvan Zaputra 9
 Visual part of
website/application/operating system
through which a user interacts with a
device across all sizes/platforms.
 Difference between UI and UX
? User Experience (UX) and User Interface (UI)
while related actually mean differentthings. UI
represents the graphic/visual interface of a
website/software, which facilitates human-
computer interaction in order to provide a quality
UX and interaction. A UX represents how a user
responds/emotes/perceives a system (UI) in the
context of its use.

Alvan Zaputra 11
 In simple terms, a UI is the look and feel aspect
of a software/website responsible for user
interaction and engagement, whereas UX is the
overarching object this UI seeks to attain by
providing high quality interaction and user
engagement leading to a fulfilling and positive
experience. Everyone wants their customers to
have a good time on their websites and good
feeling about their websites.

Alvan Zaputra 12
 UI History

Alvan Zaputra 13
In 1973, a group of computer scientists at
Xerox PARC developed and launched the
Xerox Star. A personal computer with the
very first graphical user interface (GUI).
 The teams at Apple Computer Inc continued to
develop and expand on the idea of the GUI. In
January 19, 1983 Apple Computer Inc introduced
The Lisa. First personal computer with GUI.
 Continue with Macintosh released in 1984. The
first successful commercial desktop computer in
that era.
Macintosh GUI
Glossy UI Style
1990’s - 2000’s
Skeuomorphism UI Style
2000 - 2012
Metro UI Style
2012 - 2016
Flat UI Style
2012 - now
Minimalist UI
2016 - now
Fluent Design System
2017 - now