> For the complete documentation index, see [llms.txt](https://justin-se.gitbook.io/justin-se-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://justin-se.gitbook.io/justin-se-docs/front-end-development/user-experiance-design/create-lofi-prototype.md).

# Create Low Fidelity Prototype

## 1. Plan Wireframe

### **User Flow**

Make flow chart of path that user will take to achive the Goal Statement, \
by each feature from start to end.

<figure><img src="https://2508767388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRookNjwubMJWQgqxL6Q%2Fuploads%2FdQENw2gdMk0qqQHL9s7a%2Fimage.png?alt=media&amp;token=50509902-4686-451b-beda-00d51507f556" alt=""><figcaption></figcaption></figure>

### Story Board

story board tell the idea and solution on High Level. \
it let people not in design team know why user will use the app and how it help. \
we can spot logic issue and enhance the user experience from it.

We can build storyboard based on Problem Statement & Goal Statement.

#### **Storyboard should includes**

* **Character**: States the user in the storyboard.
* **Scene:** Gives designers a way to imagine the user’s environment.
* **Plot**: Describes the solution or benefit offered by the design.
* **Narrative**: Describes the problem the user is facing and how the design will solve this problem.

<figure><img src="https://2508767388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRookNjwubMJWQgqxL6Q%2Fuploads%2Fl8W0sYjzS4ffd9HHcJRh%2Fimage.png?alt=media&amp;token=81845f61-0952-4ec7-bf0e-60f5cf6ebd16" alt=""><figcaption><p>Story board example 1</p></figcaption></figure>

<figure><img src="https://2508767388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRookNjwubMJWQgqxL6Q%2Fuploads%2FK0HAfHRTKi9aoqfZWp8j%2Fimage.png?alt=media&amp;token=4c63bb42-3938-45ca-bc0f-f509c9b60664" alt=""><figcaption><p>Story board example 2</p></figcaption></figure>

#### Type of Storyboard

* **Big Picture :** focuses on user needs, pain points, and solution provided.
* **Close Up Storyboard :** focus on detail and how solution work.

## 2. **Information Architecture (IA)**

a chart of the data/info that user can access

IA could benefits from many perspective:

* Project manager can decide what data share to user
* Security engineer & software engineer can aware of data usage
* Clearer structure for how prototype will navigation.

### Type of Information Architecture:

#### **Hierarchy 层次**

* Each node can deep dive into, most common on mobile design
*

```
<figure><img src="/files/QrsCRw20Ve9ZO5g5VkxM" alt=""><figcaption></figcaption></figure>
```

#### **Sequential 线性**

* Designed flow step by step, login/sign up, or setup a playstation or apple device.
*

```
<figure><img src="/files/1I9lctwel3ugddkllikE" alt=""><figcaption></figcaption></figure>
```

#### Matrix 矩阵

* can link from anywhere to anywhere, like wikipedia.

#### Database 数据库

* based on relation of database.

### **Eight basic principles of Information Architecture**&#x20;

1. **Object principle**: You should view your content as “living” and as something that changes and grows over time.
2. **Choice principle**: People think they want to have many choices, but they actually need fewer choices that are well-organized.
3. **Disclosure principle**: Information should not be unexpected or unnecessary.
4. **Exemplar principle**: Humans put things into categories and group different concepts together.
5. **Front door principle**: The home web page doesn't need to do everything. Users often get to your site through a side entrance.
6. **Multiple classification principle**: People have different ways of searching for information.
7. **Focused navigation principle**: There must be a strategy and logic behind the way navigation menus are designed.
8. **Growth principle**: The amount of content in a design will grow over time.

### Resources

* [5 Examples of Effective Information Architecture | Adobe XD Ideas](https://xd.adobe.com/ideas/process/information-architecture/information-architecture-examples/)
* [Information Architecture Guide for UX Architects & Designers | Adobe XD Ideas](https://xd.adobe.com/ideas/process/information-architecture/information-ux-architect/)
* [5 Examples of Effective Information Architecture | Adobe XD Ideas](https://xd.adobe.com/ideas/process/information-architecture/information-architecture-examples/)
* [World IA Day 2019 — accessibility tips for Information Architects](https://people4research.medium.com/world-ia-day-2019-accessibility-tips-for-information-architects-79bd187191a4)
* [Information Architecture. Basics for Designers.](https://uxplanet.org/information-architecture-basics-for-designers-b5d43df62e20)
* [Information architecture: a UX designer’s guide](https://www.justinmind.com/wireframe/information-architecture-ux-guide)

## 3. **Build Wireframe**

### **Sketch first wireframes**

* connect the **information architecture** to a simple visualized design and confirm the direction with team.
*

```
<figure><img src="/files/3WlXR5r7eCKJpN0yVume" alt=""><figcaption></figcaption></figure>
```

### **Create Structured Wireframe**

* with standard boxed and lines wireframe to let UI / Visual Designer have image of it, \
  get some review & feedback about user flow & layout of this wireframe.

  <figure><img src="https://2508767388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRookNjwubMJWQgqxL6Q%2Fuploads%2FFTVmpyS8EiIK1ub7Rpoc%2Fimage.png?alt=media&amp;token=aa104151-6bb3-467b-a137-c283ab6cc09c" alt=""><figcaption></figcaption></figure>

#### Gestalt Principle / [Wiki](https://en.wikipedia.org/wiki/Gestalt_psychology)

* in short,  keep common elements look alike, \
  like most hyperlink are blue & underlined, \
  ppl will use their "common sense" on a new app.
* Gestalt Principle of **proximity** \
  button labeled “learn more” close to the text of an article. \
  If a user presses the button, they’ll assume it lead to more content of article. \
  Alternatively, if leave a lot space between text of article and “learn more” button, \
  users might not understand the connection between the two elements.&#x20;

  <figure><img src="https://2508767388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRookNjwubMJWQgqxL6Q%2Fuploads%2FyJns4zYzZE6uPBzFNYlI%2Fimage.png?alt=media&amp;token=df480da0-4d24-41c3-8364-ca764cad8f44" alt=""><figcaption></figcaption></figure>

#### **Avoid Deceptive Pattern**

Tricks to make more money and make user unhappy

* **Forced continuity**\
  The practice of charging a user for a membership without a warning or a reminder.
* **Sneak into basket**\
  When a user has to remove an item from their cart if they don’t want to buy it, which is an extra step that could be easily missed.
* **Hidden costs**\
  Hidden or unexpected charges in the user’s cart that are not revealed until the end of the checkout process.
* **Confirm Shaming**\
  When users are made to feel guilty when they opt out of something.
* **Urgency**\
  Attempting to convince users to purchase an item before they run out of time and miss today’s “amazing” price.
* **Scarcity**\
  When a website makes users very aware of the limited number of items in stock.