User Interface and User Experience Design Basics

1
UI/ UX Design Basics

• A Classroom Guide
• ADMEC MULTIMEDIA INSTITUTE
  www.admecindia.co.in 9811-8181-22

2
UI AND UX

• UX refers to the term User Experience while UI
  stands for User Interface. But despite their
  closeness, there are lot more to their execution
  process and design discipline.

3

• UX design relates to the overall user interaction
  and experience with an 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

• On the other hand, User Interface (UI) is more
  about visual design and information design around
  screens. Though 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
(No Transcript)
6
(No Transcript)
7
(No Transcript)
8
(No Transcript)
9
(No Transcript)
10
(No Transcript)
11
User Interface Design

• Part I

12
UI Design Basics
Section 1
13
Introduction

• 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
• Interaction Design
• Visual Design and
• Information Architecture

14
1. Interaction Design

• Interaction design is an important component
  within the giant umbrella of user experience (UX)
  design.
• - 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.

15
Best Practices for Designing Interactions

• Consider these qualities and associated questions
  when creating digital products that have an
  interactive element
• Questions to Consider when Designing for
  Interaction
• Define How Users Can Interact with the Interface
• Give Users Clues about Behavior before Actions
  are Taken
• Anticipate and Mitigate Errors
• Consider System Feedback and Response Time
• Strategically Think about Each Elements
• Simplify for Learnability

16
(No Transcript)
17
(No Transcript)
18
2. Visual Design

• 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.

19
12 Visual Hierarchy Principles
20
12 Visual Hierarchy Principles
21
12 Visual Hierarchy Principles
22
12 Visual Hierarchy Principles
23
Basic Elements of Visual Design

• The basic elements that combine to create visual
  designs include the following
• Lines
• Shapes
• Color
• Texture
• Typography
• Form

24
Principles for Creating a Visual Design

• A successful visual design applies the following
  principles to elements noted above and
  effectively brings them together in a way that
  makes sense.  When trying to figure out how to
  use the basic elements consider
• Unity
• Gestalt
• Space
• Hierarchy
• Balance
• Contrast
• Scale
• Dominance
• Similarity

25
Example of Putting it all together
26
3. Information Architecture

• 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.
• Why a Well Thought Out IA Matters
• The purpose of your IA is to help users
  understand where they are, what theyve found,
  whats around, and what to expect.

27
3. Information Architecture

• Why a Well Thought Out IA Matters
• The purpose of your IA is to help users
  understand
• where they are
• what theyve found
• whats around and
• what to expect

28
What You Need to Know

• To be successful, you need a diverse
  understanding of industry standards for creating,
  storing, accessing and presenting information.
• 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

29
What You Need to Know

• In order to create these systems of information,
  you need to understand the interdependent nature
  of users, content, and context.

• It is also referred to this as the information
  ecology and visualized it as a venn diagram. 
  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

30
Choosing Interface Elements

• 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
• Refer please www.getbootstrap.com

31
Best Practices for Designing an Interface

• Everything stems from knowing your users
  including understanding their
• Goals
• Skills
• Preferences and
• Tendencies

Once you know about your users, make sure to
consider the next points when designing your
interface.
32
Best Practices for Designing an Interface

• 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 whats
  happening
• Think about the defaults

33
10 User Interface Design Fundamentals

• 1. Know your user
• 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

34

• 2. Pay attention to patterns

Users spend the majority of their time on
interfaces other than your own (Facebook, Yahoo,
Google 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.
35

• 3. Stay consistent
• 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 (Usability 101)
• https//www.nngroup.com/articles/usability-101-int
  roduction-to-usability/

36

• 4. Use visual hierarchy
• 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

37

• 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.

38

• 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 user knows
  how to prevent the error from occurring again.

39

• 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.

40

• 8. Speak their language
• If you think every pixel, every icon, every
  typeface matters, then you also need to believe
  every letter matters.
• Getting Real

41

• 9. Keep it simple
• A modern paradox is that its simpler to create
  complex interfaces because its so complex to
  simplify them.
• Pär Almqvist
• https//www.crunchbase.com/person/pC3A4r-almqvis
  t

42

• 10. Keep moving forward
• This is a key principle in UI design.
• It is often said when developing interfaces that
  you need to fail fast, and iterate often.

43
Law of UI Design
Section 2
A CASE STUDY ON MOST POPULAR APPS AND WEBSITES
44
Laws of User Interface Design

• 1. Law of clarity
• The user will avoid interface elements without a
  clear meaning.

45
Laws of User Interface Design

• 2. Law of preferred action
• The user will feel more comfortable when they
  understand what the preferred action is.

46
Laws of User Interface Design

• 3. Law of context

The user expects to see interface controls close
to the object he wants to control.
47
Laws of User Interface Design

• 4. Law of defaults

The user will rarely change default settings.
48
Laws of User Interface Design

• 5. Law of guided action

The user will probably do something if he is
asked to do it.
49
Laws of User Interface Design

• 6. Law of feedback

The user will feel more confident if you provide
clear and constant feedback.
50
Laws of User Interface Design

• 7. Law of easing

The user will be more inclined to perform a
complex action if its broken down into smaller
steps.
51
RECAP- What weve covered so far?

• What is UI Designing?
• What is UX Designing?
• UI v/s UX Design
• Graphic v/s UX Design
• Graphic v/s UI Design
• Digital Team Roles
• UI Design Basics
• Interaction Design
• Visual Design
• Information Architecture
• 10 UI Design Fundamentals
• Best Practices for Designing an Interface
• Laws of UI Design

52
User Experience Design

• Part II

53
Don Norman, inventor of the term User
Experience and a cognitive science researcher

• No product is an island. A product is more than
  the product. It is a cohesive, integrated set of
  experiences. Think through all of the stages of a
  product or service from initial intentions
  through final reflections, from first usage to
  help, service, and maintenance. Make them all
  work together seamlessly.

https//en.wikipedia.org/wiki/Don_Norman
54
What is User Experience (UX) Design?

• It is the process of creating products that
  provide meaningful and relevant experiences to
  users.
• This involves the design of the entire process of
  acquiring and integrating the product, including
  aspects of branding, design, usability, and
  function.

55
What UX Designers do goes Beyond UI Design

• It is often used interchangeably with terms such
  as User Interface Design and Usability.
• A UX designer is concerned with the entire
  process as we discussed on previous slide.
• It is a story that begins before the device is
  even in the users hands.

56
UX Designers consider the Why, What and How of
Product Use

• The Why involves the users
• motivations for adopting a product
• views associated with the ownership and use of
  the product
• The What addresses
• the things people can do with a productits
  functionality
• Finally, the How relates
• to the design of functionality in an accessible
  and aesthetically pleasant way

57
WHY
WHAT
HOW

• UX designers start with the Why before
  determining the What and then, finally, the How
  in order to create products that users can form
  meaningful experiences with.

58
(No Transcript)
59
Why is UX Important?

• Nowadays, with so much emphasis on user-centered
  design
• Its important because it deals with our users
  needs enough said,
• and everyone would probably be satisfied with
  that.

60
UX Design is User-Centered

• Since UX design encompasses the entire user
  journey, its a multidisciplinary field UX
  designers come from a variety of backgrounds such
  as visual design, programming, psychology and
  interaction design.

61
UX Design is User-Centered

• User-Centered Design is an iterative process that
  takes an understanding of the users and their
  context as a starting point for all design and
  development.

62
Things to Know About UX Design

• UX design is an amazing discipline, but it
  cannot, or will not, accomplish certain things.
• UX Design is not One Size Fits All
• Cant be Directly Assessed with Traditional
  Metrics
• Not the Same Thing as Usability

63
Things To Know About UX Design

• User experience and usability have become
  synonymous, but these two fields are clearly
  distinct.
• UX addresses how a user feels when using a
  system, while usability is about the
  user-friendliness and efficiency of the
  interface.
• Usability is big part of the user experience and
  plays a major role in experiences that are
  effective and pleasant, but then human factors
  science, psychology, information architecture and
  user-centered design principles also play major
  roles.

64
Criticisms of UX as A Profession

• Not everyone sees the value of having a UX
  designer on the team. Arguments against hiring UX
  specialists revolve around the perceived
  associated costs, redundancy in skill set and
  fear of change.
• Yet Another Thing to Worry About
• Adds Expense
• Results Are Not Directly Measurable

65
Tasks and Techniques of UX Designers

• UX designers perform various tasks at various
  points in the process. Here are a few things that
  they deliver.
• Evaluation of Current System
• A/B Testing
• User Surveys
• Wireframes and Prototypes
• User Flows
• Storytelling
• Design Patterns
• User Profiles and Personas
• Content Inventory
• Content Style Guides

66
Tasks and Techniques of UX Designers

• Evaluation of Current System

• A/B Testing

If a system already exists, a UX professional
will holistically evaluate its current state.
They will report issues and suggest fixes based
on their analysis of research data.
67
Tasks And Techniques Of UX Designers

• User Surveys
• Wireframes and Prototypes

68
Tasks and Techniques of UX Designers

• User Flows

69
Tasks And Techniques Of UX Designers

• Storytelling
• Puts a human face on dry data
• Can simplify complex ideas for a team
• More efficient team collaboration and purpose
• Insight into the key users
• Setting a project direction faster

70
Tasks And Techniques Of UX Designers

• Design Patterns

71
Tasks and Techniques of UX Designers

• User Profiles and Personas
• To increase the quality and consistency of your
  work
• Have been in use since the mid-90s
• They are a boost in clarity, productivity and
  success

72
(No Transcript)
73
(No Transcript)
74
For more personas, please visit
https//venngage.com/blog/user-persona-examples/
75
Tools of the Trade for UX Experts

1. Wireframing and Prototyping Applications
2. A/B Testing Software
3. Content Inventory Software
4. User Testing and Feedback Software
5. Analytics Software

76
Tools of the Trade for UX Experts

• a. Wireframing and Prototyping Applications
• Wireframing and prototyping can be done
  simply with pen and paper.

77
Popular Wireframing Tools OmniGraffle Balsamiq
Mockups Mockingbird
78
Tools of the Trade for UX Experts

• b. A/B Testing Software
• A/B testing (also known as split testing or
  multivariate testing) compares different versions
  of a page, and it can be conducted with any of
  several programs.
• http//www.google.com/websiteoptimizer/

79
Tools of the Trade for UX Experts

• c. Content Inventory Software/ Spreadsheet
• A content audit is the activity of checking all
  of the content on a website, and compiling it
  into a big list. There are three main types of
  audits you can perform
• Full content inventory
• Partial content inventory
• Content sample

80
Tools of the Trade for UX Experts

• d. User Testing and Feedback Software
• Interviewing users is another popular UX design
  task.
• The most effective and cost-saving way to do this
  is with a surveying or feedback app.
• General survey tools such as PollDaddy are
  flexible solutions that can be used for other
  tasks, too.
• There are usability-specific feedback tools, such
  as Usabilla, and remote user-testing services,
  such as Usability Hub, which administer usability
  tests on reviewers.

81
Tools of the Trade for UX Experts

• e. Analytics Software
• UX designers can analyze traffic statistics to
  hypothesize what types of experiences would be
  most effective for the audience of the website.
• A feature-packed and free analytics tool is
  Google Analytics.

82
admecindia.co.in
83
Check-out Our UI/ UX Courses For Videos on
Design, Please Visit Our YouTube Channel More
Courses GRAPHIC DESIGN WEB DESIGN WEB
DEVELOPMENT ANIMATION MULTIMEDIA POST
PRODUCTION VIDEO EDITING ARCHITECTURE
DESIGN DIGITAL MARKETING
R
ISO 90012015 CERTIFIED ADMEC MULTIMEDIA
INSTITUTE Leader in Animation Digital Media
Education
To Know More www.admecindia.co.in
www.graphic-design-institute.com Phones
91-9811-8181-22, 91-9911-7823-50