UI UX - The Bigger Picture

UI/UX
The Bigger Picture
By: Mayank Lambhate

What is UX?
User experience design
User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction with a product by
improving the usability, accessibility, and pleasure provided in the interaction with the product. User
experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing
all aspects of a product or service as perceived by users.
Elements: User experience design includes elements of interaction design, information architecture, user
research, and other disciplines, and is concerned with all facts of the overall experience delivered to users.
Following is a short analysis of its constituent parts.
Visual design: Visual design, also commonly known as graphic design, user interface design, communication
design, and visual communication, represents the aesthetics or lookandfeel of the front end of any user
interface. Graphic treatment of interface elements is often perceived as the visual design. The purpose of
visual design is to use visual elements like colors, images, and symbols to convey a message to its audience.
Fundamentals of Gestalt psychology and visual perception give a cognitive perspective on how to create
effective visual communication.
Information architecture: Main article: Information architecture
Information architecture is the art and science of structuring and organizing the information in products and
services to support usability and find ability. In the context of information architecture, information is
separate from both knowledge and data, and lies nebulously between them. It is information about objects. The
objects can range from websites, to software applications, to images et al. It is also concerned with metadata:
terms used to describe and represent content objects such as documents, people, process, and organizations.
Navigation design: Navigation design is the way in which the interface elements are placed so as to regulate
the users movement through the information architecture and make it simple.
Structuring, organization, and labeling: Structuring is reducing information to its basic building units and
then relating them to each other. Organization involves grouping these units in a distinctive and meaningful
manner. Labeling means using appropriate wording to support easy navigation and findability.
Finding and managing: Findability is the most critical success factor for information architecture. If users
are not able to find required information without browsing, searching or asking, then the findability of the
information architecture fails. Navigation needs to be clearly conveyed to ease finding of the contents.

Just kidding!!
The presentation won’t look like the previous slide.
Let’s have a look at the previous slide and see what went wrong.

4
What went wrong?
1) Old courier type font.
2) No proper section
differentiation.
3) Too much content to
deliver..!!
Bottom line : You didn't feel good about it.

5
Let’s define it
User Experience is: Perceptions and Responses
resulting from the use of a application, device, product,
or any type of interface.

6
A few points
1) Its not about the color of the button, rather how easily
the user can access that button.
Let the colors be designer’s domain.
2) Content structuring, wireframing and prototyping.
3) Ux is a part of the whole development process, it
should not be delivered individually.
4) Priority to keep in mind while designing UX:
1. Pleasurable → 2. Ease of Access. → 3. Usability → 4. Reliability.

7
How to deliver a great UX
STEP 1
Know your User

8
STEP 1 : Know your User.
You are not the user !

9
STEP 1 : Know your User.
Or maybe, you are !

10
STEP 2
Create User Stories / Scenario Map

11
STEP 2 : Create User Stories / Scenario Map
The blue note is the action user needs to perform, the yellow one is the idea to
solve or explain how the website help user doing the action.

12
STEP 3
Start creating Wireframes and Interaction
Prototypes.

13
STEP 3 : Start creating Wireframes and Interaction Prototypes.

14
STEP 4
Let the User experience the Application.

15
STEP 4 : Let the User experience the Application.
→ Watch for the CTA (Call to Action) behavior.
→ Take proper feedbacks for design iteration.
→ Take note of unnecessary navigations.
→ Let the user decide its great or not.

17
Types of Design
1. Skeuomorphic Design
2. Flat Design
3. Material Design

18
Skeuomorphic Design
It is a concept design in which the look of the UI components
on a webpage is similar to real world objects.
For ex – An alarm clock application may have an actual alarm clock to show the
time and the clock hands might be used for setting the time.

19
Flat Design
Flat design says that the webpage is flat piece of paper on
which other HTML elements are aligned.
It emphasizes on minimum use of stylistic elements and flat
colors.
Example link: http://interactions.webflow.com/

20
Material Design
It is a designing concept which looks to the design as a
3-Dimensional space with applied shadows and
animations.
Unlike flat design, its elements can expand and reform
according to the layout. The elements have their own
physical surfaces and edges.
Example link: http://interactions.webflow.com/

21
Now that we know whats makes a great UX,
let talk about the means to deliver it.
The User Interface

Let’s define it
User Interface is: The means by which a user interacts
with the computer, machine or a software.

23
What does UI include ?

Layouts

UI Components (Headings, Buttons, Inputs)

Colors

Typography

Branding

24
How to write a perfect markup?
It is simple, just map the HTML element with the data.
Let’s say, we want to show the below type of data on
the webpage.
First Name: Last Name: Age: Hobbies:
John Johnson 48 UI Design, Web
Design.

25
Which element would you select to
represent this data?

26
Table?

27
<dl>
<dt>First Name:</dt><dd>John</dd>
<dt>Last Name:</dt><dd>Johnson</dd>
<dt>Age:</dt><dd>48</dd>
<dt>Hobbies:</dt><dd>UI Design, Web Design.</dd>
</dl>
No, I would use a ‘description list’.
Why?
→ We have a data which is clearly in key: value form.
→ We have a single record of the data so we don’t want to use complex
marking up of data like table.

29
The CSS pursuit
Some of the designers tend to write more and more CSS for each
and every element they find in the hierarchy.
This becomes a problem when you have a 4000 lines CSS and
you don’t know what to do.
Let’s look at few snippets which would help you to write a
manageable CSS.

30
The CSS pursuit
#heading a {
color: #f1f1f1;
font-size: 12px;
}
#heading p {
color: #f1f1f1;
}
header {
color: #f1f1f1;
font-size: 17px;
}
Instead of adding the same color in all the rules, you can create a class
and apply it to elements:
.white {color: #f1f1f1;}
If you are not using SCSS for your project, it is fine, most of the time it is not
needed. Below is the way how you can make it less bulky.

31
The CSS pursuit
#heading a { color: #f1f1f1; font-size: 12px; }
header { color: #f1f1f1; font-size: 17px; }
#heading p { color: #f1f1f1; }
If you don’t want to add CSS classes, you could simply do this.
#heading a, header, #heading p { color: #f1f1f1; }
#heading a { font-size: 12px; }
header { font-size: 17px; }

32
Good tools for UI Design
1. Codepen (for quick testing snippets or sharing code with others)
https://codepen.io/
2. Shoelace (for Bootstrap Grid)
http://shoelace.io/
3. CSS3Generator (for generating CSS properties as per visual view.)
http://css3generator.com/
4. Color Hunt (for color pallets)
http://colorhunt.co/

UI UX - The Bigger Picture

More Related Content

Similar to UI UX - The Bigger Picture (20)

Recently uploaded (20)

UI UX - The Bigger Picture