Understanding UI/UX

Design
Introduction to UI/UX Design
Understanding UI/UX Design
https://uxplanet.org/what-is-ui-vs-ux-design-and-the-difference-d9113f6612de

What is UI/UX Design

UI design and UX design are two of the most often confused and conflated terms in
web and app design. And understandably so. They’re usually placed together in a
single term, UI/UX design, and viewed from the surface they seem to be describing
the same thing. It’s often hard to find solid descriptions of the two that don’t descend
too far into jargon. But fear not! What follows is an easy-to-digest primer on these
terms.

What is UI Design

The “UI” in UI design stands for “user interface.” The user interface is the graphical
layout of an application. It consists of the buttons users click on, the text they read,
the images, sliders, text entry fields, and all the rest of the items the user interacts
with. This includes screen layout, transitions, interface animations and every single
micro-interaction. Any sort of visual element, interaction, or animation must all be
designed.

What is UX Design

“UX” stands for “user experience.” A user’s experience of the app is determined by
how they interact with it. Is the experience smooth and intuitive or clunky and
confusing? Does navigating the app feel logical or does it feel arbitrary? Does
interacting with the app give people the sense that they’re efficiently accomplishing
the tasks they set out to achieve or does it feel like a struggle? User experience is
determined by how easy or difficult it is to interact with the user interface elements
that the UI designers have created.

How UI and UX design work together

So a UX designer decides how the user interface works while the UI designer decides
how the user interface looks. This is a very collaborative process, and the two design
teams tend to work closely together. As the UX team is working out the flow of the
app, how all of the buttons navigate you through your tasks, and how the interface
efficiently serves up the information user’s need, the UI team is working on how all of
these interface elements will appear on screen.

Let’s say at some point in the design process it’s decided that extra buttons need to be
added to a given screen. This will change how the buttons will need to be organized
and could require changing their shape or size. The UX team would determine the
best way to lay out the buttons while the UI teams adapt their designs to fit the new
layout. Constant communication and collaboration between UI and UX designers help
to assure that the final user interface looks as good as it can, while also operating
efficiently and intuitively.

Element of UI/UX Design

Dengan referensi utama dari buku:

The Elements of User Experience - Jesse Garrett

The Elements of User Experience by Jesse James Garrett

When you experience a website, maybe to buy something, or do anything, you make
some decisions while surfing this website. So, If we study the elements of that
experience (considering all actions users can make), we can begin to understand how
those decisions are made. Thus, Enhancing that experience, and satisfying user needs
will get people motivated to use & interact with the product.

There are five dependent layers, each level builds on the level before it, and they start
with an abstract level towards a concrete one (from bottom to top).

1. Strategy (start from the bottom)

The reason for the product, application, or the site, why we create it, who are we doing
this for, why people are willing to use it, why they need it. The goal here is to define
the user needs and business objectives.

This could be done through the Strategic Research Process, where you interview
users, and all stakeholders in addition to reviewing the competing products or
companies.
 2. Scope (2nd from the bottom)

Defines the functional and content requirements. What are the features, and content
contained in the application or product. The requirements should fulfill and be aligned
with the strategic goals.

Functional Requirements It’s the requirements about the functions, or features in the
product, how features work with each other, and how they interrelate with each
other. These features are what users need to reach the objectives.

Content Requirements It’s the information we need in order to provide value.

Information like text, images, audio, videos, …etc. Without defining the content, we
have no idea about the size or the time required to complete the project.

Functional Vs Content requirements

The feature is having a media player for songs, while the content is the audio files for
these songs.

3. Structure (The middle)

Defines how the user interacts with the product, how the system behaves when the
user interacts, how it’s organized, prioritized, and how much of it. Structure is split into
two components, Interaction Design & Information Architecture.

Interaction Design Given the functional requirements, It defines how users can
interact with the product, and how the system behaves in response to the user
interactions.

Information Architecture Given the content requirements, It defines the arrangement

of content elements, how they are organized, to facilitate human understanding.
 4. Skeleton (The 2nd from the top)

Skeleton determines the visual form on the screen, presentation, and arrangement of
all elements that make us interact with the functionality of the system that exists on
the interface. Also how the user moves through the information, and how information
is presented to make it effective, clear, and obvious.

5. Surface (The top, fina element)

It’s the sum total of all the work and decisions we have made. It determines how does
the product will look like, and choosing the right layout, typography, colors, …etc.

In Surface, we are dealing with Visual Design (Sensory Design), it’s concerned with the
visual appearance of content, controls, which gives a clue of what users can do, and
how to interact with them. It should make things easier to understand, and increase
cognitive ability to absorb what users see on the screen.

How UX Elements Work Together

Each layer is dependent on the other layers below it. If you screw up in Strategy, you
will pay for it during the whole project. When you make a decision or choice in a layer,
this decision will affect your future decisions in the next layers.

Your decisions may change over time, and if you consider decisions to be fixed, you
will end up building something that nobody wants. If you are in Surface, and you need
to enhance functionality, you can go back to Structure, and make it better.

To summarize how those 5 elements work together, we start with the Strategy, which
is the foundation of any successful UX. Strategy becomes Scope when user &
business needs are translated to requirements for content & functionality.
Scope is given Structure when we define the ways of interaction with the system
functionality, the system response, and how information is organized. Sketching each
screen of the system(i.e. using wireframes) to present the areas of interactions and
structure defined in Structure, and how the information will be presented clearly, is
what we do in Skeleton. Finally, In Surface, we take all the work and decisions we
have made into the final visual presentation.

UX Nowadays
Written by Wigy Ramadhan with reference from:

https://www.parc.com/about-parc/parc-history/

https://www.parc.com/blog/invention-and-user-centric-design/

https://www.wired.com/insights/2014/04/origins-design-thinking/

https://www.ideo.com/case-study/creating-the-first-usable-mouse

https://www.ibm.com/design/thinking/

https://www.designcouncil.org.uk/news-opinion/what-framework-innovation-desig
n-councils-evolved-double-diamond

https://designnotes.blog.gov.uk/

Intro

If we talk about UX nowadays we need to talk about the evolution of Design in general
first, especially the process and the approach of Design Thinking.
The first UX

UX was first introduced in 1975 by Xerox PARC, back then the term used to explain
about UI/UX was GUI (Graphical User Interface). The term is technically still used in
general but it is usually commonly used by programmers. Xerox PARC is also the
company that pioneers the use of ethnography for human-centered technology
design, work practice redesign, and more. It requires initiating collaboration among
computer scientists, engineers, anthropologists, sociologists, psychologists, and other
social scientists. This approach leads to improvements in many workspaces, office
products, and processes.

Fast forward to 1980, where Apple turned to IDEO, a design firm founded and led by
creative guru David Kelly. They ask IDEO to develop a mouse for their radical new
computer, the Lisa. The brief is to design a usable mouse that would last while
slashing production costs by 10 percent. Previous attempts at mouse design, by
Douglas Englebart and Xerox PARC, yielded results that were too expensive and hard
to make. The Apple mouse needed to be more reliable and less than 10 percent of the
cost of the earlier versions. The resulting mouse proved mechanically and
economically sound and was changed only slightly when adapted for use with the
first Macintosh computer. The basic mechanism design is used in virtually all
mechanical mouses produced to date.

The Application of Design Thinking

Since then the success of IDEO uses design thinking to create such an innovative
product making IDEO become famous, the design thinking gives IDEO a big name for
their incredible process and output.

IDEO then was formed and showcased its design process modeled on the work
developed at the Stanford Design School. IDEO is widely accepted as one of the
companies that brought Design Thinking to the mainstream; developing their own
customer-friendly terminology, steps, and toolkits over the years, they have allowed
those not schooled in design methodology to quickly and easily become oriented with
the process.

At present, the Design Thinking movement is gaining ground rapidly, with pioneers
like IDEO and d.school formalizing a path ahead for others to follow. Other prestigious
universities, business schools and forward thinking companies have adopted the
methodology to varying degrees, sometimes re-interpreting it to suit their specific
context or brand values.

IDEO also has proof that Design Thinking not only works for design products, but also
for designing service, systems, spatial, even business in general. Design thinking has
become a boom because Design thinking is created because big corporations lack the
ability to be creative and in extreme cases, aren't able to create new products and
services that meet unmet needs of their customers. One of the applications is what
we can see on how UX design developed.

The UX Nowadays

The success of design thinking applications makes the adoption of it becomes higher.
Many companies that adopt it also make several customization to suit their needs.
Example, IBM Enterprise Design Thinking - IBM has made a little change on how they
adopt the framework, they recreate the design thinking framework becomes simpler.

Another example is the Design Council UK, which is known for its GOV.UK, which is
one of the examples of the success of how Design Thinking applied to the public
services. They also recreate the framework to fit with their needs. Design Thinking in
Design Council UK is known as the Double Diamond process.

The application of Design Thinking is also forced by the evolution of technology,

where people now rely on technologies to live. Where exactly UX plays a big role there.
Because the more complex the world also needs UX to make everything easy to be
accessible and usable.

The UX Tools
How To Choose the Right UX Tool

Disalin dari: https://uxcam.com/blog/ux-tools/

We found four key aspects that matter when choosing the right UX tool:

● Usefulness: How well does the tool solve your problem?

● Usability: Is the tool easy to use on a day-to-day basis?
● Collaboration: Is it easy to share your work with others?
● Integration: Are there any integrations with other tools? Does it make the
transition between design phases easy?

UX Tools

1. Figma

Figma is the most powerful UX tool, it is the most used tool for the designer and
researcher. Before, designers usually used Sketch, and researchers used Miro, it was
quite a hassle for both parties to work together. But Figma now enables both parties
to have seamless collaboration because Figma has 2 tools inside their software, for
design, and for whiteboarding (Figjam). So it is easy to move the design to the figjam
and do the discussion on it. Also it is easy for researchers to share their analysis from
their study and designers don’t have an issue to back and forth through different
platforms, because figma design and figjam can be opened at a time.
The process of handing off the design to the developer is also much easier because
the tool has a feature named “export developer handoff”, which will give you the css
code based on the interface that has been designed by you.

2. Sketch (design tool)

Sketch is a design tool for designing interfaces. They were the OG tool for Interface
Design. Sketch has a clean and easy-to-use interface that’ll make it easy for you to
create nice-looking mock-ups. Collaboration is an issue though — especially since
Sketch works on macOS only.

3. Miro (whiteboarding tool)

Miro is a whiteboard tool that enables you to mind map, use post-its, drawing,
brainstorming, etc. Designers and researchers usually use this tool to draw the user
journey map, user flow, analyze the research findings, and do workshops with the
cross functional stakeholder.

4. User Testing (for testing design)

This platform is great for finding suited candidates to test new designs on. You can
talk with users while they engage with your work. And you can get the recording of
the task based test, so you can just upload the design you want to test, set the criteria
of the audiences, set the task you want audiences to accomplish on your design, then
send it out. You will get the result later, and there you can learn how the audiences
interact with your design.