Chapter 2
MEET THE ELEMENTS
Great Website Designs
• apple.com
• airbnb.com
• about.instagram.com
• stripe.com
• revolut.com
• https://www.scribd.com/document/659182827/Fundamentals-of-Creating-a-Great-UI-UX
Strategy plane
• Who are our users?
• What are our user’s needs?
• What are our business objectives?
• How do we measure success?
Scope plane
• we explore what features and functions are within scope, as well
as what content elements may be required to meet
users needs.
Structure plane
• Structure defines how the various features and
functions fit together. Here we start transitioning from
the abstract to more concrete elements of the user
experience. Structure deals with defining how users get
to specific information and where they can go next.
• Whereas skeleton, the next plane, might define the
arrangement of navigational objects allowing users to
select their ‘ride’, structure defines the categories of
trips or rides possible.
Skeleton plane
• Skeleton is the concrete expression of the more
abstract structure of the site. Here we start designing
interface elements — buttons, text blocks, images, etc.
— that will facilitate the user’s understanding and
movement through the product.
• The skeleton, that often materializes in the form of a
wireframe or a low-fidelity prototype, is designed to
optimize the arrangement of UI elements for efficiency
and ease of use. For example, back in our taxi app
example, it might be determined that a map would
show the location of the nearest vehicles and a
prominent button would allow the user to confirm their
Mobile UI
Surface
• Surface is the ‘skin’ layer of the product. Here,
designers dive into the visual treatment of the product
• including text, graphical elements, and navigational
components to create the packaging, the final ‘look-
and-feel’, of the product.
• Surface level design is often what most people will refer
to when talking about the product. For some, the
packaging is what triggers feelings and emotions that
will lead them to choose one taxi app over another.
Building from bottom to top
Details the goals of the user and owner
Data visualization –data
representation
Graphics -1. Visual Appeal
The User Interface
Design Process
Common Usability Problems
• 1. Ambiguous menus and icons.
• 2. Languages that permit only single-direction movement through a system.
• 3. Input and direct manipulation limits.
• 4. Highlighting and selection limitations.
• 5. Unclear step sequences.
• 6. More steps to manage the interface than to perform tasks.
• 7. Complex linkage between and within applications.
• 8. Inadequate feedback and confirmation.
• 9. Lack of system anticipation and intelligence.
• 10. Inadequate error messages, help, tutorials, and documentation.
Some Objective Measures of Usability
• How effective is the interface? Can the required range of tasks be accomplished:
• At better than some required level of performance (for example, in terms of
• speed and errors)?
• By some required percentage of the specified target range of users?
• Within some required proportion of the range of usage environments?
• How learnable is the interface? Can the interface be learned:
• Within some specified time from commissioning and start of user training?
• Based on some specified amount of training and user support?
• Within some specified relearning time each time for intermittent users?
The Design Team
Provide a balanced design team, including specialists in:
• Development
• Human factors
• Visual design
• Usability assessment
• Documentation
• Training
Important Human Characteristics in Design
• Perception
Functionality
• Interactive Elements: In some cases, images themselves are
interactive (e.g., clickable product images, gallery sliders). They can
serve dual roles in both aesthetics and functionality.
Background images, textures, and illustrations can set the tone for the
user's experience, whether that's professionalism, creativity, or fun.
