UX Design Fundamentals

Muhammad Ishfaq

Agenda

What is UX?

What is UX?

User experience is a term used to describe the overall experience and satisfaction a user has when using a product or system. It most commonly refers to a combination of software and business topics, such as selling over the web, but it applies to any result of interaction design.

User Goals & Business Goals

Users always want something i.e info, product or service

Facebook for fun

Linkedin for Professional Networking

Youtube for learning, fun and

professional

Every business has a reason to create website/app

Money

Brand Awareness

New Member to community

Alignment User & Business Goals

Identify user problems and try to overcome without harming business goals.

Providing an acceptable solution to user which don’t ignore business goal and technological constraints.

It involves a process:

Research to understand the users

Development of ideas (to solve users’ needs)

Clarity about needs of the business

Development of Solutions & measurement

Demo to client

Feedback incorporation

UX Design (UXD)

The 5 Main Ingredients of UX

The 5 Main Ingredients of UX

Any one of these 5 Ingredients could have a Crash Course of its own.

So I will be oversimplifying a bit.

How to Understand Users"never blame the user"

How to Understand Users?

What is User Research? (Do it early, do it often)

How to Ask Questions (open, leading, closed/Direct)

User experiments

Intrusive surveys (leading to statistical analysis on usage and then deriving UX elements)

Creating User Personas

Designing for Devices

Design Patterns

How to Ask Questions from users

1. Open Questions This allows for a wide range of answers, and works well when you want all the feedback you can get.

2. Leading Questions This narrows the answers to a certain type.

3. Closed/Direct Questions This type of question offers a choice. Yes or no.

Sample of User Persona

Designing for Devices (A user point of view)

Step 1: How does it like to be touched? (With your finger or your mouse)

Step 2: Starting from small resolution.

Step 3: What special powers does this device have?

Step 4: Consider the software / Operating system and their conventions.

Step 5: Be responsive.

Step 6: Think about more than one screen at a time.

Design Patterns

A design is not necessarily good just because it’s common. To be a “good” Design Pattern, a solution must be common and usable.

Example:

Facebook’s “hamburger” button — which represents the hidden menu in many mobile apps — has started appearing on full-size websites that have plenty of space for a menu. It’s common because hiding the menu is easier than designing a nice one, not because the results are better.

Information Architecture

Information Architecture

What is Information Architecture?

Flat or Deep Architecture

User Stories & Types of Information Architecture

What is a Wireframe?

Information Architecture

What is WireFrame?

What is WireFrame?

1) Wireframes are not a basic sketch.

2) Good wireframes take time.

3) Wireframes aren’t presented in phases.

4) Wireframes should be taken seriously.

5) Wireframes are not meant for display.

WireFrame (Sample)

Visual Design Principles

Visual Weight, Contrast & Depth

Color has meanings

Line Tension & Edge Tension

Alignment & Proximity

Functional Layout Design

1. Visual Hierarchy & Patterns

2. Browsing vs. Searching vs. Discovery

3. The Axis of Interaction (Example)

4. Forms, Primary & Secondary Buttons

5. Calls-to-Action, Instructions & Labels (VERB + BENEFIT + URGENT TIME or PLACE)

Z-Pattern

F-Pattern

Value Addition in Confiz

UX process in Confiz

Strengthening UX Studio

Early Involvement of UX Studio

Addition in Service Portfolio

Uplifting Experience of On Going Project

UX Consultancy

Thanks for your time

Any Questions?

Useful links

http://www.goodui.org/

http://zurb.com/patterntap

http://www.mobile-patterns.com/

https://prezi.com/aafmvya6bk7t/understanding-information-architecture/

http://thehipperelement.com

http://designhooks.com/