女神必備-川普也能變萌妹: 美圖秀秀 (上)

 

trump-e1484896156543

App intro based on play store
Installs: 10,000,000 – 50,000,000
User review:4.5, 401,710 total
Download link: https://play.google.com/store/apps/details?id=com.mt.mtxx.mtxx&hl=en

忘了遮瑕,沒擦口紅,眼線暈開,還是不上道的男友總是抓錯拍照角度…. 沒關係,只要手機裝有美圖秀秀,連川普都能變萌妹!

美圖秀秀在Google Play上的評價一項不錯,在UIUX上的設計也是不斷持續進步。目前在兩大應用平台上,也依循著各自的設計規範,做出兩種Flat design 以及 Material Deisgn不同感覺的介面設計。今天我們要來看的就是發佈在Android版本中的美圖秀秀。

普遍而言,介面設計和2d空間的平面設計不同。介面設計中,不同的物件會有不同的互動方式。像是說,導覽的物件是不太需要滑動的,如App Bar, Bottom Navigation Bar基本上是不會跟著內容頁面一起轉動。
為了要傳達這個概念,因此在Material Design中,就是在除了XY軸以外,每個物件都有自己的Z 軸(深度軸)。當介面創造出深度空間,使用者自然就會發現每個元件都是獨立不同的物件,對於不同的互動模式就不會太過驚訝。

在新版的美圖秀秀中,可以看出來中,App Bar就有疊上一層淡淡的陰影。

當在滑動內容頁面的時候,當內容頁面從App Bar後穿過的時候,一切都是這麼的自然~

而下一個是Material Design中也很重要的動畫效果。雖然說網路上對於動畫的效果有褒有貶,但個人覺得在使用動畫的分寸只要拿捏得好,其實就像陰影一樣,可以讓整個體驗更為優雅,但是過頭的話就是讓人想到PPT中那些可怕的過場動畫呀!(抖)

新的美圖秀秀中,一進首頁也是用了絢麗的動畫效果(畢竟人家的TA是女子較多)個人覺得在這頁面中,有些動畫做得好又些又稍嫌多於一些。要用動畫一定要知道為什麼要使用動畫,個人喜歡的部份是在最上面小小的”Drag down to selfie”的提示文字,他只有在一開始進來的時候會顯示大概兩次,也可以讓使用者在一片相似的按鈕中,找到下一步行動的明燈~

很多中國的APP首頁設計都會在首頁,放了很多很像的按鈕,這種Dashboard pattern 設計常常會讓使用者無所適從,(想像進到一個房間中,裡面又有六扇門在你面前,有完沒完)。雖然說美圖秀秀首頁設計還是有這種Dashoboard pattern 設計,但是新版有些新的改變,把使用者最常使用的 Camera做了較為突出的設計。

Screenshot_20170723-192145.png

還有一個也是蠻喜歡的設計,就是在按下按鈕進到下一個頁面,和退出頁面的動畫是一致的,這些小小的細節讓整體的體驗更為細緻。

最後一個比較不懂的是,每次進到首頁的動畫由右滑到左邊,淡入的效果好像和整體不太搭嘎。當使用者急著拍照的時候,多那兩秒的動畫反而會造成反效果。最後,最無法理解的是背景那位衝浪客在那邊幹嘛.. (待續)

 

女神必備-川普也能變萌妹: 美圖秀秀 (上)

 

trump-e1484896156543

App intro based on play store
Installs: 10,000,000 – 50,000,000
User review:4.5, 401,710 total
Download link: https://play.google.com/store/apps/details?id=com.mt.mtxx.mtxx&hl=en

忘了遮瑕,沒擦口紅,眼線暈開,還是不上道的男友總是抓錯拍照角度…. 沒關係,只要手機裝有美圖秀秀,連川普都能變萌妹!

美圖秀秀在Google Play上的評價一項不錯,在UIUX上的設計也是不斷持續進步。目前在兩大應用平台上,也依循著各自的設計規範,做出兩種Flat design 以及 Material Deisgn不同感覺的介面設計。今天我們要來看的就是發佈在Android版本中的美圖秀秀。

當美圖遇上Material Design

普遍而言,介面設計和2d空間的平面設計不同。介面設計中,不同的物件會有不同的互動方式。像是說,常常需要被點擊的導覽欄,如App Bar, Bottom Navigation Bar基本上是不會跟著內容頁面一起轉動。
為了要傳達每個物件都是各自運轉的概念,在Material Design中,就是在除了XY軸以外,每個物件都有自己的Z 軸(深度軸)。當介面創造出深度空間,使用者自然就會發現每個元件都是獨立不同的物件,對於不同的互動模式就不會太過驚訝。

在新版的美圖秀秀中,可以看出來中,App Bar就有疊上一層淡淡的陰影。

當在滑動內容頁面的時候,當內容頁面從App Bar後穿過的時候,一切都是這麼的自然~

ezgif-1-410f4528dc.gif

拍照軟體中的動畫效果

而下一個是Material Design中也很重要的動畫效果。雖然說網路上對於動畫的效果有褒有貶,但個人覺得在使用動畫的分寸只要拿捏得好,其實就像陰影一樣,可以讓整個體驗更為優雅,但是過頭的話就是讓人想到PPT中那些可怕的過場動畫呀!(抖)

新的美圖秀秀中,一進首頁也是用了絢麗的動畫效果(畢竟人家的TA是女子較多)個人覺得在這頁面中,有些動畫做得好又些又稍嫌多於一些。要用動畫一定要知道為什麼要使用動畫,個人喜歡的部份是在最上面小小的”Drag down to selfie”的提示文字,他只有在一開始進來的時候會顯示大概兩次,也可以讓使用者在一片相似的按鈕中,找到下一步行動的明燈~

ezgif-1-04e4ecc585.gif

很多中國的APP首頁設計都會在首頁,放了很多很像的按鈕,這種Dashboard pattern 設計常常會讓使用者無所適從,(想像進到一個房間中,裡面又有六扇門在你面前,有完沒完)。雖然說美圖秀秀首頁設計還是有這種Dashoboard pattern 設計,但是新版有些新的改變,把使用者最常使用的 Camera做了較為突出的設計。

還有一個也是蠻喜歡的設計,就是在按下按鈕進到下一個頁面,和退出頁面的動畫是一致的,這些小小的細節讓整體的體驗更為細緻。

ezgif-1-eb5cded7bb.gif

最後一個比較不懂的是,每次進到首頁的動畫由右滑到左邊,淡入的效果好像和整體不太搭嘎,也不太理解為什麼背景那位衝浪客在那邊幹嘛.. (待續)

 

Review of the between app

Registration page

 

when users at the registration page even though their account or password are incorrect, however, the  system provides a message at the same page without redirecting to another extra page, so users don’t have to click back button again. This design has high usability in some specific situations for example: users who are not sure about their password and need to try a few times.
Nevertheless, in the situation of users typed the wrong password, the button next to input box does not change to “X” to erase wrong password,  it might cause some inconveniences when users need to correct their password.

Log Out

Assuming some situations such as the users who has more than one partner, they might need to switch two accounts on the same phone, accordingly, it shows how important of  log out function. When users attempt to log out, some of them tried to click the menu button at up right side.(three dots), but it turns out to be home picture setting.

Since the menu buttons cannot link me to log out page, I tried to click the top tab bar menu button (three lines), luckily it led me to the right place, neverthless, beforing clicking log out the two buttons [profile] and [setting]  appears it made users confusing  and not sure log out function is belonged to which categories.

 

Landing page:

Calendar

Design for zero data, when new users who don’t have any data yet. under calendar category there has other two functions are special day and event, however, for new user might not understand the conceptual model of the app, system should try to integrate or clarify these two functions.

Our activity

Stay at the same page, when users scroling down there has one card about [Our activity], users can scroll left and right to get further infromation. However, when users use gesture , whole page slide to the next page.

 

 

 

 

Reviews of the Yahoo News Digest app

Choice design and mental model 

Yahoo Digest mobile app is a simple and easy to use. It has limits on the numbers of news by providing only 10 news stories in one page to help users read the news more comfortably  with digestible chunks of texts. It also publishes news twice a day, which is the same metaphor like reading newspapers in morning and evening.

Nudge 

In addition, every reading experience collects one little circle dot to complete the big circle. It not only provides feedback to user but nudges them to stay on this news app longer and come back more often.

Unclear visual affordance

However, some elements in Yahoo Digest would be better to be fixed. There is a button on the main page which looks like hamburger menu button. Initially I thought that the button was of the page menu, but it turned out to be not. It was actually for checking the list of past news stories though the graphic interpretation made me confused.

Also, the icons are not really clear if they are clickable or just information. With too much neutralization of UI colors, icons seems to lose their original functions. Users need to read many icons on a article as they are not easily discernable with same colors and styles. In addition, the feedback on UI to let users know is not clear enough. Currently, the background color of the number on an article changes if a user has read it. It is too natural and subtle change to notice and the feedback of UI does not represent ‘have read’. Instead, ‘check’ or other UI elements would be easier for users to understand that they have read the articles.

 

Loose context in UI 

In the news collection circles which shows the article numbers you’ve read. Right next to those circles, there is a calendar button which looks like it is going to show the articles of what I have read and haven’t. However, it is not and the function of the UI is not really clear and not easily understandable. To see what I haven’t read, I had to click the hamburger menu button which has no connection in terms of context. Also, the colors are loosely linked with the information. Sky blue color does not represent ‘America’, purple does not show any relevance with ‘Europe’ and other colors as well. Rather, it would be better to use the colors where they are really needed like the issues of neutralized icon colors mentioned above.

Deep hierarchy of UI 

After clicking the hamburger menu button, it shows a few buttons again. Setting button is one of those and if this button is clicked, a new layer of menu comes up on top of hamburger menu page which is not a really common case. It can make users lost on their ways with deep and unclear path of the information architecture on the app.

Review of the Airbnb app

 

Content first, Information hierarchy 

Airbnb helps users to make decisions efficiently from a large amount of information. First of all, the first page includes big images and texts which are the most useful information for users to help them find out the information they want or need efficiently and effectively. Also, it provides some recommendations which functions as ‘nudge’ for users to make their decisions more easily. Furthermore, the whole process creates the user flow from easy choices to difficult ones which helps users learn how to choose making them satisfied with their final decision.

Navigation

Airbnb mobile app provides infinite scrolling to navigate information which helps users continue their behavior without a need of clicks. Though they can browse information simply by scrolling, it doesn’t seem to have enough affordance, especially in the page of room details. It would be better to give some hints to let users know that there are more information above the fold.

(good example: google app, users can see a bit of card information above the fold) Users are more likely to scroll down when they understand the context.
In addition, ‘map’ on the room details page is static allowing users to click only without scrolling while some other apps use map iframe. It is not recommendable in mobile scrolling navigation because users can scroll the map by a mistake even if they want to scroll the whole page.


Visual hierarchy

Airbnb user interface shows a clear visual hierarchy. For example, it hides advanced functions like <more filters> to highlight the most important information about rooms. Also, it always locate <request to book> and <check avaiblity> buttons on the most easily visible and clickable position for users.

Visual consistency

Light red colors on Airbnb app indicates clickable action and it is consistent in every page to make users to follow this kind of mental model quickly. It is not defined only to button UI but also applied to input text UI as well. With the visual consistency, it enhances usability of UI.

 

references:
http://www.amazon.com/The-Art-Choosing-Sheena-Iyengar/dp/0446504114
http://expandedramblings.com/index.php/airbnb-statistics/