Prototyping

2022/04/03 (補充內容及新增投影片)
2022/04/05 (修改投影片)
2023/02/17 (補充內容)

簡介

雛型是一個與使用者溝通的工具，也因為不同的溝通目的，會有不同類型的雛型:

• Sketch: 草圖，通常是手繪或紙本，也可以是透過軟體來繪製，一般而言，就是對於設計概念的最初設計

• Wireframe: 框線圖，可以是手繪或紙本，也可以是透過軟體來繪製，一般而言，就是對於畫面輸入、輸出的內容與配置設計的最初設計

• Mockup: 視覺稿，通常是透過軟體來繪製，一般而言，就是對於畫面輸入、輸出的配置設計的視覺高擬真設計

• Prototype: 雛型，廣義的說法就是包含以上的做法，狹義的作法是視覺及互動行為高擬真設計。

也可以從雛型的擬真度來說明:

• 視覺擬真度，也就是視覺效果跟真實的系統之間的相似程度。視覺擬真又會分內容擬真與樣式擬真。一般而言，Sketch的視覺擬真度最低，Wireframe重視內容擬真度，Mockup則重視樣式擬真度。

• 互動行為擬真度，也就是互動行為與真實的系統之間的相似程度。一般而言，Prototype的重點在於互動行為擬真度。

當使用者的需求不是很清楚時，設計者會利用雛型讓使用者感受真正的系統，所以，如果想確定的是內容，那就需要利用內容擬真度高的Wireframe來確認，如果想確定的是樣式的視覺感受，就需要利用樣式擬真度高的Mockup來確認。

• 大學生的 UI 設計選修課（10）Prototype 類型與使用時機

  • 初學者的 Prototype **

    •  Prototype、Wireframe、Mockup的差別

  • Prototype 大觀園：Prototype 優劣分析步步來

• Prototyping for beginners (7:23)

• Rapid Prototyping — How To Make It Work For You

  • Process

    • Prototype

    • Review

    • Improvise and iterate

  • Rapid Prototyping Methods

    • Paper Prototyping

    • Digital Prototyping

• 3 rapid prototyping exercises to improve your UX skills

  • 8–6–4–2 Rapid Prototype Method

  • A Twist on the #DailyUI Challenge

  • Solve a Problem you’ve encountered

• A Scientific Method for Impactful UX Prototyping

  • WHAT / Choose a starting point

  • WHY / Identify what you need to learn

  • HOW / Choose a means of prototyping

  • TEST / Play with it

  • OBSERVE / Collect observations

  • CONCLUDE / Draw conclusions

• Prototyping Empathy: Six tips for staying focused on people while prototyping

  • Make people your top prototyping requirement

  • Optimize for a human experience, not a feature

  • Use prototyping to explore (as well as validate)

  • Know what it looks like if you’re wrong

  • Make it more authentic with people’s real stuff

  • Use your prototype to share people’s experience

• You want to learn to prototype? First, bake a cake.

• Prototyping: the mother of invention

• Why you should bring prototyping into your design process? 

• How visualizing my Agile backlog improved productivity 

• Prototyping isn’t optional anymore 

• Experimental product design — prototyping with live data 

• Prototypes 101: Set yourself up for iteration (a failure story) 

  • That’s why it’s important to set yourself up for easy iteration so you can go through as many loops as possible when building a prototype.

• Top 4 Quick Prototyping Methods 

  • Paper Prototype

  • Clickable Wireframes

  • Wizard of Oz

  • Role Play

Prototyping for XR

• XR prototyping

  • tools

• Top 20 AR/VR Design Tools and Resources For Building Immersive Applications

Mockup

• UI/UX Design: Realistic Mockups : Placeit

Sketching

• Sketching 101: exploring the solution space 

• How Sketching Will Make You a Smarter Designer

  • Proof of concept

  • Sketching = visual thinking

  • Iterating ideas quickly

  • Generating discussion

  • Give it a shot

• Why wireframes are becoming obsolete

  • What do I do instead of wireframes? Instead, try sketching.

• UX sketching: the missing link

Wireframe

• Effective Wireframing 

• 大學生的 UI 設計選修課（9）練習畫 Wireframe 的方法

  • 什麼是 Wireframe ?

  • 為什麼要畫3次 Wireframe？

  • 工作清單：Wireframe

• Wireframing for beginners (7:25)

• What are Wire Frames?

  • What are wireframes?

    • Wireframing is a way to design a website service at the structural level. 

    • A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. 

    • Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.

  • The Value of Wireframes

    • Wireframing is essential in UI design

    • A wireframe is much easier to adapt than a concept design

    • Wireframing takes place early in the project lifecycle

  • Creating Wireframes

    • Do not use colors

    • Do not use images

    • Use only one generic font

  • Important Elements Illustrated in Wireframes

    • Logo

    • Search field

    • Breadcrumb

    • Headers, including page title as the H1 and subheads H2-Hx

    • Navigation systems, including global navigation and local navigation

    • Body content

    • Share buttons

    • Contact information

    • Footer

  • Types of Wireframes

    • Low-fidelity wireframes

    • High-fidelity wireframes

• Wireframing 101

  • Step 1. Design presentation style

  • Step 2. Design the workflow

  • Step 3. Select the tools

  • Step 4. Grid it out

  • Step 5. Move placeholders

  • Step 5. Add typography

• The Newbie PM’s Guide to Creating Wireframes and Mockups: Tips to start creating wireframes and mockups (using Figma) with no design experience

  • Choose a design software and stick to it

    • Sketch

    • Marvel

    • Figma

  • Decide on a visual theme

  • Download GUI files with basic iOS/Android elements

  • Get inspired!

  • Understand User Experience Design

  • Review everything with your team

  • Lastly, practice, practice and practice

• Why Wireframing is so Important in User Experience

• Do the Wireframes 

• UI Challenge: Wireframing an existing app

• How to Cook Wireframes Sketches

• UI Challenge: Wireframing Too Good To Go App

• A case for Spreadsheet Wireframes 

• Lo-fi vs hi-fi wireframes, and the importance of designing the Flow

• Understanding the potential of wireframes 

  • Wireframing cannot be obsolete.

  • Wireframes aren’t concrete.

  • Wireframes aren’t a waste of time.

• I stopped doing wireframes, this is what happened next : This story is about the time when we had piled up deadlines, not enough time, a screaming client, and a team that wanted designs delivered faster.

  • The upsides of working on high-fidelity screens

    • Better visual ideation

    • Less time and more productivity

    • More time to experiment on better UI

    • Higher productivity, better developed screens

    • Better client interactions

• Wireframes are becoming less relevant — and that’s a good thing

  • Shifting product development methodologies are changing how design gets done

    • Usability and information architecture don’t exist in a vacuum

    • Wireframes are rarely effective for stakeholders

    • It’s getting faster and easier to approximate high fidelity visuals

    • Does wireframing ever make sense?

• Wireframes are useless : Why we stopped using them and how it improved the way we design.

  • When we say that we don’t use wireframes, we’re talking about high-fidelity wireframes.

  • Argument 1: Wireframes allow us to decide on strategic and content-related questions

  • Argument 2: Wireframes allow us to test the product thesis early on

  • Argument 3: Wireframes accelerate the process

  • Argument 4: Wireframes allow you to avoid discussions of taste

• Planning Before Doing: Wireframe and Mockup 

• Designers and their wireframe habits 

  •  47% (54) prefer pen and paper over desktop apps, which was chosen by 46% (53), followed by drawing on tablet/iPad at 8% (9).