文 / 方定宇

如果你是一個經驗老到的設計師,你也許會同意在設計這些使用介面(User interface, UI)時,自別人作品中汲取靈感並不是個抄襲的行為。從過去的經驗中歸納並使用類似的設計概念、相同的準則能確保創造出一個能讓用戶迅速熟悉使用的介面。

有些人會認為固守那些準則、追隨其他人的設計理念會扼殺創造力。最終,所有的應用程式會變得一模一樣。但是從用戶體驗 (User Experience) 的角度來看,會發現不一樣的問題。當你習慣了像是 Google、Facebook、Instagram 或是其他你喜歡的應用程式所提供的介面,你會覺得他們所呈現出來的東西永遠是對的,而且他們設計的目標與你一致。最後,你甚至無法質疑他們為什麼要這樣子。下面有些關於用戶介面設計模式的例子可以讓我們參考,而且你也會發現原來這樣做並不沒有想像中的那麼好。

  • 把導覽功能藏起來

許多用戶介面設計師寫過關於導覽選單圖案的文章,並且在文中指責這種像是漢堡的選單設計所帶來的種種缺點。如果你錯過了這些抱怨,這邊有 篇文章可供參考。但簡單的來說,這些抱怨並不是針對那些圖案畫得好不好,而是在抱怨為什麼要將導覽功能隱藏在一個小小的漢堡背後

這個小小的漢堡式選單設計對設計者來說非常誘人與方便—設計師並不需要擔心在畫面上擺不下這麼多的功能選單或是這些選單佔去太多的螢幕空間。設計師們只需要將整個導覽功能濃縮到一個小小的圖案後面隱藏起來就可以了。

但是,有研究顯示出,如果能將這些導覽功能放在畫面上比較明顯的地方,不但能夠增加用戶在使用程式時的參與程度,還能夠增加收益與用戶的滿意度。

1

不同年份 YouTube 上的導覽模式
(來源:Luke Worblewski)

這就是為什麼現在許多大公司 (如FacebookYouTube) 都逐漸地將漢堡式選單換成了可以一目了然的導覽選項擺設。

2

滑動式的選單設計具有彈性而且讓人使用起來較為舒適

如果你的導覽功能非常複雜,把它們藏起來並不會使應用程式更加友善,務必優先處理好這些問題!

  • 2.使用太多圖標

很多 UI 設計師認為這些圖標 (icon) 能夠取代冗長的功能描述、降低佔用畫面的比例,而且用戶們都能夠很輕易的了解這些圖標所代表的功能是什麼。設計師常常會用一些圖案來代表某種功能,但其實很多人並不能夠理解這些圖案背後的意義,或是在點選這些圖案的時候會發生什麼事情。舉例來說,你知道點選 Instagram 上的這個圖標會發生什麼事情嗎?

3

或是,如果你從來沒有使用過 Google 翻譯 (Google Translate) 這個應用程式,當你點選了下面的這個圖案會打開什麼功能呢?

4

下意識的認為用戶非常熟悉這些圖案背後代表的功能,或是以為他們願意花額外的時間來探索並學習這些圖案背後的功能,這些都是設計師非常常犯的錯誤。

ggg

在 Bloom.fm 上面神秘的功能列表

如果你設計了一個需要跳出文字說明的圖標來讓它更好用,那麼這證明了你做了一件愚蠢的事。

eeee

在 Swarm 這個應用程式上所呈現的圖標說明

到這邊,並不是說我們不能使用圖案來代表某些特定的功能。有很多的圖案是大家所熟知的,像是搜尋、播放 (影片或音樂)、設定等等。

6

在 Swarm 這個應用程式上所呈現的圖標說明

到這邊,並不是說我們不能使用圖案來代表某些特定的功能。有很多的圖案是大家所熟知的,像是搜尋、播放 (影片或音樂)、設定等等。

7

Pixelmator應用程式上的導覽選項

一些基本的功能可以有效地被圖標所取代,但是那些複雜的功能,還是要加上一些適當的功能解釋。

  • 3.利用不同的操控手勢來導覽

多點觸控技術在 2007 年蘋果發表 iPhone 之後逐漸受到重視。用戶們了解到他們並不單單只能夠點擊手機螢幕,同時也能夠縮效、滑動螢幕畫面。這些不同的操控手勢逐漸在設計師間流行,而且也有許多的應用程式不斷加入新的操控手勢。

8

應用程式 Clear 上的導覽操作手勢

就像是隱藏那些程式導覽功能,或是使用圖案來代替一大堆冗長的功能敘述,操控手勢似乎也能夠為設計者節省下不少的螢幕空間。

但是,對於這些操控手勢必須要了解的第一件事情是 — 這些操控手勢在畫面上永遠看不到,而用戶必須要記住這些滑動方式才能使用這些功能。就像在漢堡式的導覽選單當中,如果你隱藏了其中一個選項,就會有更少的人去使用這個功能。再者,手勢跟圖標有些相通的問題存在 — 有些操控的方式是大家所熟知的,像是縮放、滑動,但是對於其他的操控手勢而言,不同的程式很可能會有不同的手勢需要用戶們慢慢瞭解。

不幸的是,大部份的操控手勢式在不同的應用程式當中並不一致。即便是相同的操控手勢,在不同的應用程式上都可能會有不同的效果。如果你輕輕的搖幾下你的行動裝置,可能在 iOS 系統上代表著「取消」,在 Google Map 上卻代表著「送出反饋」。

9

蘋果的郵件軟體當中,在信件上頭向右滑動代表著你將這封信標記為「尚未讀取」

feffeh

千萬不要忘記這些操控手勢後面代表的功能是被隱藏起來的,而這會讓用戶耗費大量的精力記住這些操空模式。如果你是Tinder(編按:Tinder 是交友網站) 的話,你也許能夠教會整個世界向右滑代表著什麼樣的意思。

  • 4.如何讓用戶熟悉這些功能

如何讓用戶熟悉產品 (onboarding) 在使用者經驗相關的議題中被廣泛熱烈地討論著。在許多案例當中,讓用戶熟悉這個應用程式僅僅是在介面上秀出一些解釋功能的畫面或是一些簡單的教學動畫。

hth

為什麼這是個糟糕的方式?因為有許多使用者只想快點開始使用 app,他們根本不想理會這些冗長的介紹。即便用戶們看了這些簡易的功能教學,當他們關上這個程式,很快就會把那些介紹忘的一乾二淨。最後,務必要了解到,在你的 app 中加上了教學功能並不會讓你的 app 更加簡便好用。

記得下面的這段話:

uuu

一個使用者介面就像是個笑話。如果你需要解釋它,那們它就沒有你想像中的那麼好。來源:Startup Vitamins

要讓用戶熟悉程式的使用介面也許能夠靠著不同的方式來達成。舉例來說,Slack 這個 app 在用戶打開程式的第一個畫面中簡單的介紹了他們自己,並注重於這個應用程式如何為使用者帶來更多效益,而非聚焦於程式的功能與如何操作這個應用程式。

nhn

互動介面能夠讓初次接觸到這個應用程式的用戶得更容易上手。像是就沒有解釋要如何使用他們的這個應用程式。相對的,Duolingo 鼓勵用戶們直接進入到應用程式,選擇語言並同時做了些小測試。他們這麼做是因為知道邊做邊學是讓用戶在短時間內熟悉程式操控的最好方法

延伸閱讀:UI 設計師親身示範:2 張 A4 紙就能說得清楚的設計感簡報法

(本文資料來源:Medium,未經授權不得轉載)