Heuristic 啟發式設計: 用戶體驗設計的重要原則

更新於 發佈於 閱讀時間約 2 分鐘

今天來介紹什麼是Heuristic 啟發式設計跟在應用程式也許你會看到為什麼要設計的原因

Heuristic 啟發式設計意思是來解決問題

1.視覺系統狀態Visibility of system status - 告訴使用者目前的狀態


當你在使用Canva設計軟體時候,你會很清楚知道你現在在哪個步驟

Canva 設計軟體

Canva 設計軟體

以下完整的動態表達

https://d37oebn0w9ir6a.cloudfront.net/account_6827/canva-onboarding-ux-example_0ceab558f8c1b3a35be14826ce6fb25a.gif


另一個範例是,你下載軟體,你會知道你目前的進度條在哪裡

App 下載在Chromie

App 下載在Chromie


2.配對真實世界和應用系統




清空的垃圾桶

清空的垃圾桶


有東西在裡面時的垃圾桶

有東西在裡面時的垃圾桶


3.使用者控制度與自由空間 - 避免錯誤和有自由空間


當你在看YT時候,YT提供進度條,讓使用者有自由權利去控制時間條

raw-image


當你不小心誤刪到東西,你可以回到上一個步驟 :)


Google Driver

Google Driver


4.一致性與正規


The rule of consistency and standards means that a user’s interaction with your product never confuses him. “Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen.” — Jakob Nielsen.

Jakob 定義一致性的重要性,當使用者使用你的產品時,他們不會覺得困惑.


以下是大家熟悉的產品,是不是感覺很類似相同呢?

Microsoft 軟體

Microsoft 軟體

優點:

  • 相似的顏色和icon 再一起
  • 減少使用者學習時間跟認識


文章討論:

  • 系統告知使用者進度和回饋
  • 使用者想要回到之前步驟或跳過
  • 產品和特徵保持一至性
  • 加快使用者熟悉產品和特徵


影片教學和講解



額外資源教學

如何用FIgma製作個人作品集教學 - https://vocus.cc/article/645c733dfd89780001ffe890

學習如何設計好產品 - 使用者經驗設計 | 易用性 | 通用設計 - https://vocus.cc/article/64637f74fd8978000175c0f8

前端教學架設TodoApp

https://vocus.cc/article/64637f74fd8978000175c0f8

學習如何用HMTL5和CSS3,跟JayLin一起做一個NFT卡片完整課程 - https://vocus.cc/article/64637f74fd8978000175c0f8


更多相關教學文章

JayLinXR YT: https://www.youtube.com/@jaylinxr

JayLinXR IG: https://www.instagram.com/jaylin_xr/

JayLinXR FB: https://www.facebook.com/JayLinXR


資料來源


https://bootcamp.uxdesign.cc/visibility-of-system-status-common-examples-7aab5e18b291


avatar-img
12會員
33內容數
設計 + 程式,是一個出版對設計和程式的學習影片和教學文章,目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
JayLinXR 的其他內容
學習程式語言是一個不容易的過程,但有效的學習方法可以幫助你克服挫折,這篇文章分享了一個程式設計師的學習心得以及一些建議,包括課後實作、短期學習、跟別人比較等注意事項,同時提供了一些相關的教學資源。
5/5學習
隨著科技發展迅速,軟體職缺需求大增長,有些朋友對IT產業有興趣並想成為一位軟體工程師,但不知道從哪裡下手,透過傳統學校、培訓班或自學等不同方法,有多種學習路徑可以選擇。此外,還提供了一些額外資源教學連結,方便讀者進一步提升相關技能。
學習JavaScript的理由有很多,包括容易學習的程式語言、互動式體驗、多功能性、跨平臺、社群和資源豐富、高市場需求。此外,文章提供了設計和前端教學的相關資源連結。文章中還提到了一些與學習JavaScript相關的教學文章和影音教學資源。
建置好前端後, MERN全端工程師教學在這裡 想學習MongoDB和Express可以來這裡學習
動態導覽列為增加使用者經驗UX,要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
Todo App是一個很好學習程式語言的專案開始,JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
學習程式語言是一個不容易的過程,但有效的學習方法可以幫助你克服挫折,這篇文章分享了一個程式設計師的學習心得以及一些建議,包括課後實作、短期學習、跟別人比較等注意事項,同時提供了一些相關的教學資源。
5/5學習
隨著科技發展迅速,軟體職缺需求大增長,有些朋友對IT產業有興趣並想成為一位軟體工程師,但不知道從哪裡下手,透過傳統學校、培訓班或自學等不同方法,有多種學習路徑可以選擇。此外,還提供了一些額外資源教學連結,方便讀者進一步提升相關技能。
學習JavaScript的理由有很多,包括容易學習的程式語言、互動式體驗、多功能性、跨平臺、社群和資源豐富、高市場需求。此外,文章提供了設計和前端教學的相關資源連結。文章中還提到了一些與學習JavaScript相關的教學文章和影音教學資源。
建置好前端後, MERN全端工程師教學在這裡 想學習MongoDB和Express可以來這裡學習
動態導覽列為增加使用者經驗UX,要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
Todo App是一個很好學習程式語言的專案開始,JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
易用性的第一定律就是「別讓我思考」。瞭解人類的思考系統,強化第一系統的網站設計方法,包括善用使用者過去的網頁觀看經驗,強化互動元件的預設用途提示,建立內容的視覺層次,整合選項,預設同意以及製作圖像的範例教學。提高網站的易用性,強化使用者對網站的體驗。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
引言: 相信各位有興趣於設計的朋友,也會經常苦惱於毫無靈感的時候。但只要運用以下幾種方法,相信會令大家茅塞頓開,靈感湧現。 1. 研究和理解目標受眾: 研究和理解目標受眾是設計師成功的關鍵之一。透過深入了解目標受眾的偏好、需求、價值觀和使用習慣,設計師能夠創建出更具吸引力和有效的設計方案。
Thumbnail
觀察者模式透過主題訂閱/訊息通知的機制,極度增強系統的可擴展性、靈活性以及降低組件間的耦合度。概念直觀簡單,是非常實用的設計模式。
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
易用性的第一定律就是「別讓我思考」。瞭解人類的思考系統,強化第一系統的網站設計方法,包括善用使用者過去的網頁觀看經驗,強化互動元件的預設用途提示,建立內容的視覺層次,整合選項,預設同意以及製作圖像的範例教學。提高網站的易用性,強化使用者對網站的體驗。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
引言: 相信各位有興趣於設計的朋友,也會經常苦惱於毫無靈感的時候。但只要運用以下幾種方法,相信會令大家茅塞頓開,靈感湧現。 1. 研究和理解目標受眾: 研究和理解目標受眾是設計師成功的關鍵之一。透過深入了解目標受眾的偏好、需求、價值觀和使用習慣,設計師能夠創建出更具吸引力和有效的設計方案。
Thumbnail
觀察者模式透過主題訂閱/訊息通知的機制,極度增強系統的可擴展性、靈活性以及降低組件間的耦合度。概念直觀簡單,是非常實用的設計模式。
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。