User Interface Design Basic

User Interface Design Basic

By Heru Wijayanto, @2020

1. Created By : HeruWijayanto(@siheyu)
HeruWijayantoMM., MBA., M.MT
([email protected])
User interface
Design basic

2. Created By : HeruWijayanto(@siheyu)
UI and ux
uxrefers to the term user experience
while uistands for the user interface. But
despite their closeness, there are a lot
more to their execution process and
design discipline.

3. Created By : HeruWijayanto(@siheyu)
UX Design relates to the overall user
interaction and experiencewithin application
or a website. It is well known that great user
experience results in return customers and
great app usage.
Typically, the UX Design process include
research, design, prototyping, testing and
measurement . Lot of factors influence UX
Process, such as usability, utility, accessibility,
design / aesthetics, performance, ergonomics,
overall human interaction and marketing.

4. Created By : HeruWijayanto(@siheyu)
On the other hand, User Interface (UI) is
more about Visual Designand
Information Design around screens.
Through a lot of process go into this
graphical element, UI as the name
implies, about the things the user will
actually see and interact. It delivers
tangible results and focuses on how an
app or product surface look and
functions.

5. Created By : HeruWijayanto(@siheyu)

6. Created By : HeruWijayanto(@siheyu)
UxDesigner
vs
uidesigner

7. Created By : HeruWijayanto(@siheyu)
Ui design is
a part of
uxdesign

8. Created By : HeruWijayanto(@siheyu)
User Interface (UI) Design focuses on
anticipating what users might need to do and
ensuring that the interface has elements that
are easy to access, understand, and use to
facilitate those actions.
UI brings together concepts from
1.Interaction Design,
2.Visual Design,
3.Information Architecture.
User Interface Design Basics
Source : https://www.usability.gov/

9. Created By : HeruWijayanto(@siheyu)
Questions to Consider when
Designing for Interaction
•DefineHowUsersCanInteractwith
theInterface
•GiveUsersCluesaboutBehavior
beforeActionsareTaken
•AnticipateandMitigateErrors
•Consider System Feedback and
ResponseTime
•StrategicallyThink about Each
Elements
•SimplifyforLearnability
•Interaction design focuses on
creating engaging interfaces with
well thought out behaviors.
•Understanding how users and
technology communicate with
each other is fundamental to this
field.
•With this understanding, you can
anticipate how someone might
interact with the system, fix
problems early, as well as invent
new ways of doing things.
Interaction Design
Source : https://www.usability.gov/

10. Created By : HeruWijayanto(@siheyu)
Basic Elements of Visual Design
•Lines
•Shapes
•ColorPalettes
•Textures
•Typography
•Form
•Visual design focuses on the
aesthetics of a site and its related
materials by strategically
implementing images, colors,
fonts, and other elements.
•A successful visual design does not
take away from the content on the
page or function.
•Instead, it enhances it by
engaging users and helping to
build trust and interest in the
brand.
Visual Design
Source : https://www.usability.gov/

11. Created By : HeruWijayanto(@siheyu)
Why a Well Thought Out IA
Matters
ThepurposeofyourIAistohelpusers
understand:
•Wheretheyare,
•Whatthey’vefound,
•What’saround,and
•Whattoexpect.
•Information architecture (IA)
focuses on organizing, structuring,
and labeling content in an
effective and sustainable way.
•The goal is to help users find
information and complete tasks.
•To do this, you need to
understand how the pieces fit
together to create the larger
picture, how items relate to each
other within the system.
Information Architecture
Source : https://www.usability.gov/

12. Created By : HeruWijayanto(@siheyu)
In order to create these systems of information,
you need to understand the interdependent
nature of users, content, and context.Rosenfeld
and Morvillereferred to this as the “information
ecology” and visualized it as a venndiagram.
Each circle refers to:
•Context: business goals, funding, politics,
culture, technology, resources, constraints
•Content: content objectives, document and
data types, volume, existing structure,
governance and ownership
•Users: audience, tasks, needs, information-
seeking behavior, experience
To be successful, you need a diverse
understanding of industry standards for creating,
storing, accessing and presenting information.
Lou Rosenfeld and Peter Morvillein their book,
Information Architecture for the World Wide
Web, note that the main components of IA:
•Organization Schemes and Structures: How
you categorize and structure information
•Labeling Systems: How you represent
information
•Navigation Systems: How users browse or
move through information
•Search Systems: How users look for
information
Information Architecture (2)
Source : https://www.usability.gov/

13. Created By : HeruWijayanto(@siheyu)
Users have become familiar with interface elementsacting in a certain way, so try to be
consistent and predictable in your choices and their layout. Doing so will help with task
completion, efficiency, and satisfaction.
Interface elements include but are not limited to:
•Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list
boxes, toggles, date field
•Navigational Components : breadcrumb, slider, search field, pagination, slider, tags,
icons
•Informational Components : tooltips, icons, progress bar, notifications, message
boxes, modal windows
•Containers: accordion
Choosing Interface Elements

14. Created By : HeruWijayanto(@siheyu)
Everything stems from knowing your
users, including understanding their
•Goals,
•Skills,
•Preferences, and
•Tendencies.
Best Practices for Designing an Interface
Source : https://www.usability.gov/
•Keep the interface simple.
•Create consistency and use common
UI elements.
•Be purposeful in page layout.
•Strategically use color and texture.
•Use typography to create hierarchy
and clarity.
•Make sure that the system
communicates what’s happening.
•Think about the defaults.

15. Created By : HeruWijayanto(@siheyu)
1. KNOW YOUR USER
•Your user’s goals are your goals, so
learn them.
•Restate them, repeat them.
•Then, learn about your user’s skills and
experience, and what they need.
•Find out what interfaces they like and
sit down and watch how they use them.
•By focusing on your user first, you will
be able to create an interface that lets
them achieve their goals.
10 User Interface Design Fundamentals
⯀“Obsess over customers: when given the choice
between obsessing over competitors or customers,
always obsess over customers. Start with
customers and work backward.”
⯀–Jeff Bezos -

16. Created By : HeruWijayanto(@siheyu)
2. PAY ATTENTION TO PATTERNS
•Users spend the majority of their time
on interfaces other than your own
(Facebook, MySpace, Blogger, Bank of
America, school/university, news
websites, etc).
•There is no need to reinvent the wheel.
•Those interfaces may solve some of the
same problems that users perceive
within the one you are creating.
•By using familiar UI patterns, you will
help your users feel at home.
10 User Interface Design Fundamentals

17. Created By : HeruWijayanto(@siheyu)
3. STAY CONSISTENT
•Your users need consistency.
•They need to know that once they learn
to do something, they will be able to do
it again.
•Language, layout, and design are just a
few interface elements that need
consistency.
•A consistent interface enables your
users to have a better understanding of
how things will work, increasing their
efficiency.
10 User Interface Design Fundamentals
“The more users’ expectations prove right, the
more they will feel in control of the system and the
more they will like it.” –Jakob Nielson

18. Created By : HeruWijayanto(@siheyu)
4. USE VISUAL HIERARCHY
•Design your interface in a way that
allows the user to focus on what is most
important.
•The size, color, and placement of each
element work together, creating a clear
path to understanding your interface.
•A clear hierarchy will go great lengths
in reducing the appearance of
complexity (even when the actions
themselves are complex).
10 User Interface Design Fundamentals
“Designers can create normalcy out of chaos; they
can clearly communicate ideas through the
organizing and manipulating of words and
pictures.” –Jeffery Veen, The Art and Science of
Web Design

19. Created By : HeruWijayanto(@siheyu)
5. PROVIDE FEEDBACK
•Your interface should at all times speak
to your user, when his/her actions are
both right and wrong or
misunderstood.
•Always inform your users of actions,
changes in state and errors, or
exceptions that occur.
•Visual cues or simple messaging can
show the user whether his or her actions
have led to the expected result.
10 User Interface Design Fundamentals

20. Created By : HeruWijayanto(@siheyu)
6. BE FORGIVING
•No matter how clear your design is,
people will make mistakes. Your UI
should allow for and tolerate user error.
•Design ways for users to undo actions,
and be forgiving with varied inputs (no
one likes to start over because he/she put
in the wrong birth date format).
•Also, if the user does cause an error, use
your messaging as a teachable situation
by showing what action was wrong, and
ensure that she/he knows how to prevent
the error from occurring again.
10 User Interface Design Fundamentals

21. Created By : HeruWijayanto(@siheyu)
7. EMPOWER YOUR USER
•Once a user has become experienced
with your interface, reward him/her and
take off the training wheels.
•The breakdown of complex tasks into
simple steps will become cumbersome
and distracting.
•Providing more abstract ways, like
keyboard shortcuts, to accomplish tasks
will allow your design to get out of the
way.
10 User Interface Design Fundamentals

22. Created By : HeruWijayanto(@siheyu)
8. SPEAK THEIR LANGUAGE
•All interfaces require some level of
copywriting.
•Keep things conversational, not
sensational.
•Provide clear and concise labels for
actions and keep your messaging simple.
•Your users will appreciate it, because
they won’t hear you –they will hear
themselves and/or their peers.
10 User Interface Design Fundamentals
“If you think every pixel, every icon, every typeface
matters, then you also need to believe every letter
matters. ” –Getting Real

23. Created By : HeruWijayanto(@siheyu)
9. KEEP IT SIMPLE
•The best interface designs are invisible.
•They do not contain UI-bling or
unnecessary elements. Instead, the
necessary elements are succinct and
make sense. W
•heneveryou are thinking about adding a
new feature or element to your interface,
ask the question,
•“Does the user really need this?” or “Why
does the user want this very clever
animated gif?”
•Are you adding things because you like or
want them? Never let your UI ego steal the
show.
10 User Interface Design Fundamentals
“A modern paradox is that it’s simpler to create
complex interfaces because it’s so complex to
simplify them.” –PärAlmqvist

24. Created By : HeruWijayanto(@siheyu)
10. KEEP MOVING FORWARD
•It is often said when developing
interfaces that you need to fail fast, and
iterate often.
•When creating a UI, you will make
mistakes.
•Just keep moving forward, and
remember to keep your UI out of the way.
10 User Interface Design Fundamentals
Grandpa Bud: If I gave up every time I failed, I would
never have invented my fireproof pants!
[Pants burn up, revealing his underwear]
Grandpa Bud: Still working the kinks out a bit.
from Meet the Robinsons

25. Created By : HeruWijayanto(@siheyu)
•The Elements of User Experience: User-CenteredDesign for the Web and Beyond (2nd
Edition)by Jesse James Garrett
•Information Architecture for the World Wide Web: Designing Large-Scale Web
Sitesby Peter Morvilleand Louis Rosenfeld
•https://blog.teamtreehouse.com /10-user-interface-design-fundamentals
References

26. Heru Wijayanto, MM., MBA., M.MT
([email protected])
siheyu siheyu
Heru Wijayanto https://www.linkedin.com/in/heruwijayanto/