UX Design fundamentals
Published: 2024-05-17 00:19:49

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w824yjio1ozshmzhcfjn.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/239y3lx3fflsa7vd8clb.png)

The structure should be visible


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klh2i45tx55vqx9highb.png)



**- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vtrgohy42bm2djcekd8.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8r9w5993r5rgp1mo2ds.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwn6cbtjtjm5a2nty53a.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nre9hqy6zaapg3gcrse.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1u7yf0wiyx2pyft4uow8.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hp5dcycqeqhpjijjeyj.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lg3c8fcxr3d6dhpilb4s.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vukde2ehjwwmbseya4ih.png)


**- Connectedness:** Connected Elements are perceived as related


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9i2prk7feh8fqmp2k8x.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbxq31t8nqtukslr846r.png)

**- Figure/Ground:**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wd2lugwylyq5730um6o.png)




## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zrnoq3xbj9hkmgdp5k7.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81sf5psndm6yvbo3lzha.png)

**- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vr45o9vczpq9c3fi15yv.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g008cev1071nh4et2xkb.png)


**- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqda8k41rottg2gs2nie.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cn5vl9pp0gscbrea67pv.png)


**- 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