Upload
muhammad-ishfaq-ch
View
129
Download
0
Embed Size (px)
Citation preview
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/