UI

The main differences between UX and UI are:

 UX revolves around the purpose and functionality of the product,

while UI focuses on the quality of the user's interaction with the
product.
 UX involves components such as market research and identifying
user needs, while UI has more artistic design components relating
to the look and feel of the user's experience.
 UX focuses on overall project management from ideation through
development and delivery, while UI more specifically focuses on
the design of the finished product.

It’s important to distinguish the total user experience from the user
interface (UI), even though the UI is obviously an extremely
important part of the design. As an example, consider a website with
movie reviews. Even if the UI for finding a film is perfect, the UX
will be poor for a user who wants information about a small
independent release if the underlying database only contains movies
from the major studios

Often confused with UX design, UI design is more concerned with the

surface and overall feel of a design. UI design is a craft where
you the designer build an essential part of the user experience.
UX design covers the entire spectrum of the user experience.
One analogy is to picture UX design as a car with UI design as
the driving console.

User experience is determined by how easy or difficult it is to

interact with the user interface elements that the UI designers
have created.

Designing User Interfaces for Users

User interfaces are the access points where users interact with designs.
They come in three formats:

1. Graphical user interfaces (GUIs)— A tactile UI input with a

visual UI output (keyboard and monitor). Users interact with
visual representations on digital control panels. A computer’s
desktop is a GUI.
2. Voice-controlled interfaces (VUIs)— Interactions between
humans and machines using auditory commands. Most smart
assistants—e.g., Siri on iPhone and Alexa on Amazon devices,
talk-to-text, GPS and much more are VUIs.
3. Gesture-based interfaces—Users engage with 3D design spaces
through bodily motions: e.g., in virtual reality (VR) games.
How to make Great UIs
To deliver impressive GUIs, remember—users are humans, with needs
such as comfort and a limit on their mental capacities. You should
follow these guidelines:

1. Make buttons and other common elements perform

predictably (including responses such as pinch-to-zoom) so users
can unconsciously use them everywhere. Form should follow
function.
2. Maintain high discoverability. Clearly label icons and include
well-indicated affordances: e.g., shadows for buttons.
3. Keep interfaces simple (with only elements that help
serve users’ purposes) and create an “invisible” feel.
4. Respect the user’s eye and attention regarding layout. Focus on
hierarchy and readability:
1. Use proper alignment. Typically choose edge (over center)
alignment.
2. Draw attention to key features using:
 Color, brightness and contrast. Avoid including colors
or buttons excessively.
 Text via font sizes, bold type/weighting, italics, capitals
and distance between letters. Users should pick up
meanings just by scanning.
5. Minimize the number of actions for performing tasks but focus
on one chief function per page. Guide users by indicating
preferred actions. Ease complex tasks by using progressive
disclosure.
6. Put controls near objects that users want to control. For
example, a button to submit a form should be near the form.
 7. Keep users informed regarding system responses/actions with
feedback.
8. Use appropriate UI design patterns to help guide users and
reduce burdens (e.g., pre-fill forms). Beware of using dark
patterns, which include hard-to-see prefilled opt-in/opt-out
checkboxes and sneaking items into users’ carts.
9. Maintain brand consistency.
10. Always provide next steps which users can
deduce naturally, whatever their context.

# Designing a user experience begins by identifying the pain points of

the target users and figuring out how to meet the needs of said users.
This includes details such as logical flows or steps to take to reach a
goal. Once the interface is programmed to be useful, the prototype is
sent to a user interface designer, where the processes are made visually
appealing.

Developing a user experience includes:

 Overall execution and goal-tracking

 Coordination with developers and UI designers
 Integration and analytics
 Content or product strategy
 Wireframing, planning, prototyping, development, testing

Developing a user interaction includes:

 Look and feel of the site/app/program

 Branding and design research
 Responsive adaptation
 Interactivity, animation
 Implementation