DEV Community

Aryama
Aryama

Posted on

UX Design fundamentals

User experience simply refers to the way a product behaves and is used in the real world. A positive user experience is the one in which the goals of both user and the organization that created the product are met.

It also refers to as a practice , a way to generate predictive designs considering human beings , how we are wired , how we interpret things , how we know how to use certain things or how we consider anything good or bad or otherwise. UX designs takes all these things into consideration and molds it to an experience that delivers value

Elements of User experience design:

- Strategy - Why was the product created , why people need it (user needs , business objectives , user research)

User research process:
Stakeholders interviews , competitor reviews , user interviews/research, exit product audit

Questions to ask stakeholders:

  • What does the product accomplish for the business?
  • How do you expect to differentiate this product?
  • What technology decisions have been made?
  • If users are using competitors product instead , what is the reason?

Questions to ask user:

  • How often do you use the product?
  • What step/task would you put off as long as you can?
  • Can you show me how to do that step/task?

- Scope - Feature and functions contained within the product (functional specification)

It helps reduce potential conflicts , to define what we are building , what we are not , and what we are not building right now. Its good process to deliver changes iteratively to the users.

- Structure - The number of places where you can go , organized contextually. A good structure organizes information in a way that provides intuitive access to content.

The structure should be consistent

Image description

Image description

The structure should be visible

Image description

- Skeleton - The optimized organization and arragement of visual elements

  • What form will the product take?
  • How will content be manipulated and presented?
  • How will users move around and do things?

- Surface - UI screens , text , the user can interact with (visual design)

Basic principles of Visual Design:

*- Alignment *

Image description

Image description

- Proximity - Elements which are visually close to each other are perceived as a single group , related by the context of use.

Image description

- Contrast - It makes things the user wants to see, stand out

Image description

Gestalt Principles of UI Design:

People tend to focus on sum of all parts , rather than indivisual whole.

- Similarity: Items which share a visual characteristics are more related than items which are dissimilar

Image description

Image description

Image description

- Proximity: Elements placed closed to each other are perceived as related

Image description

- Connectedness: Connected Elements are perceived as related

Image description

- Continuation: The eye tends to follow visual paths and sequences in order to identify relationships between designed elements

Image description

- Figure/Ground:

Image description

User experience Laws:

- Aesthetic usability Effect - Things that look nice and aesthetic appeal more the the viewers/users

*- Doherty threshold *- Keep the wait time as short as you can

Image description

Image description

- Fitt's law: Make the Vital UI components large enough for users to accurately select them and give ample spacing between them

- Goal gradient effect: The closer you are to completing a goal or a task , the faster you work towards reaching it.

- Hick's Law: Too many choices often leads to a slower decision making process

Image description

Image description

- Jakob's law: Do not break the concept of similarity

- Millers law: Split tasks into logical , easy to process steps

- Zeigranik effect: Provide a clear indicator of progress to motivate user to complete the task

Image description

- The isolation effect: Unique and different items stand out.

Image description

- Teslers law: While some tasks seem unneccesarity complex, the complexity is integral to the function of the system and it can only be managed and not eliminated

Designing Tools:

  • Figma
  • Sketch
  • Adobe XD
  • Invision Studio

Advanced Tools for prototyping

  • Principle
  • Framer

Top comments (0)