Pinkoi APP 登入註冊頁改版 / Pinkoi APP Login & Signup

上個月我們發布了一個新的 Pinkoi APP 登入 / 註冊頁面設計,由 iOS APP 首先著手修改流程和介面,我們的 Android APP 再隨後跟進。我之所以會重新設計新的登入/註冊頁面,其實有很多原因,有些改變是來自於對於前一版用戶使用習慣的觀察,有些是為了因應新功能的增加等等。

Last month we introduced a new Pinkoi APP login / signup experience.  Pinkoi iOS APP updated the flow and interface first and our Android App followed.  There are many reasons why I redesigned the new login / signup pages; some were based on our observations of users’ behavior in previous versions of Pinkoi App while others were adjusted for the new functions.

最根本的原因其實是我們對於登入/註冊頁的重視,想不斷的改進 Pinkoi 「入口」的使用經驗。

Deep down it’s because we place a great importance upon our login / signup experience – how to constantly improve to make Pinkoi’s ‘entrance’ user experience better.

Pinkoi_app_nevermai

#Multiple Social Login / 多個社群帳號登入

新的登入/註冊頁除了更符合 iOS7 的主題設計,我們也新增了更多社群帳號登入選項,新的改版讓使用者能選擇要用 Facebook 或是 Weibo 登入 Pinkoi APP。未來我們還會持續整合其他的社群帳號登入例如 Twitter、微信、Google+等更多,以給予人們更多的登入選擇。同時我們未來也會根據不同的使用者區隔,來決定不同社群帳號登入選項的呈現次序,以偏好使用的選項為第一優先。

考量到這些可能性,我在設計頁面時也規劃了相應的調整,讓未來調整時更方便彈性。

Other than the new design fits the theme of iOS 7 more, we also gives people more social options to log in with.  With this new release, now people can log into Pinkoi APP with Facebook or Weibo.  In the future we’ll add more such as Twitter, WeChat, Google Plus, etc to give people more control over what to log in with.  We will also personalize these social login options for our users, for example, we may order these options based on user preference.

Considering these future updates, I adjusted the UI accordingly to allow more flexibility.

Pinkoi_app_1_nevermai

Pinkoi_app_2_nevermai

#Redesign the Form / 表單重新設計

在下面表單的部分,我也根據使用者的意見回饋做了額外的設計修正。

為了讓註冊流程非常非常的簡單,在設計前一版時我讓登入/註冊共享同一個表單,也就是登入頁等同於註冊頁,填完簡單的兩格資料後,使用者可以根據自己的需求來選擇是要登入或註冊。當他們點選「登入」時,我們會檢查用戶的帳號/密碼是否正確;當「註冊」被點選時,我們確保用戶填入的新帳號是獨特的。

I made some additional improvements to Login form based on people’s feedback.

In order to make sign-up process dead simple, my previous design wanted to use the same form for both Login and Signup.  I designed the page displaying a single form with two buttons below to choose from “Log in” or “Sign up.” Even though they were sharing the same form, two actions actually required different validation: we checked if the username/password combination was correct for login attempt; we verified if the wanted username was unique for signup.

Pinkoi_app_4_nevermai

我喜歡這個設計,因為它非常簡單,對於既有的登入/註冊兩頁模式是一個創新的嘗試,不過好像因此對我們的使用者而言有點「太簡單」了,部分使用者無法快速了解。

我們陸陸續續從部分使用者那裡獲得回饋,說他們在使用 Pinkoi APP 註冊的時候會有點困惑,這些使用者往往會不填帳號、密碼直接按下「註冊」按鈕,然後等待被帶往另一個名為「註冊」的頁面。

I like the design because it’s so simple and could be an alternative to the old two-form system. However, it turned out to be too simple for our users.

We’ve heard from some people that they’re confused when they tried use the form to sign up via Pinkoi APP. They would click on the “Sign up” button without putting in username/password, simply wait and expect to be taken to another “Sign up” page.

雖然其實只有非常少數使用者會因為不熟悉而卡住,我還是決定重新設計這個操作流程並把介面拆成「登入頁」「註冊頁」,正如同 Jakob Nielsen 曾經說過的 “Users spend most of their time on other websites.”  人們長久以來使用其他網站時獲得的習慣會影響他們,Pinkoi 用戶也是,所以我們最後調整了 Pinkoi APP 的登入/註冊頁來平衡使用者的預期與良好的使用經驗。

同時也新增了更清楚的動態輸入框,利用 icons 的多種變化來顯示使用者資料輸入的進度。

Even though it’s just a very small percentage of users that would get confused and stuck, I still decided to redesign the flow and separate the forms.  As Jakob Nielsen stated in an article “users spend most of their time on other websites.”  People form their expectation based on what they regularly see on other sites.  So we updated Pinkoi APP’s login / signup pages to match our users’ expectation to be more friendly while still keeping up the good user experience.

#Help is Never Too Much / 確保使用者獲得更多幫助

Pinkoi_app_5_nevermai

 

We also noticed that some people spent a lot of time on the login page because they simply forgot their passwords or didn’t complete the registration process.  Sometimes it could be other issues or unknown bugs that stopped our users from logging in and frustrated them.  A lot of times, they would just gave our APP 1 star or 3 stars because they couldn’t log in.  That’s why we also decided to make the Help more completed with this update because…  help is never too much : )

我們也注意到許多使用者會花很多時間在登入頁上,因為他們忘記自己的密碼、或是之前從來沒有完成註冊流程以開通自己的帳號,於是不能順利的登入 Pinkoi。有時候甚至可能是其他原因或 bugs 讓這些使用者不能登入而感覺受挫,很多時候我們會因此得到一顆星或三顆星的評價,因此我們決定在新版的登入頁上,提供更完整更多的幫助選項,因為幫助永遠不會嫌多的 :)

★ 特別感謝我們超級優秀的 APP team,無論是負責 iOS APP 的 Chad & Ben 或是新加入我們的 Android 生力軍 Polly,他們總是無比細心,幫助我完整每個 APP 的設計構想,很認真的看待每個環節,處處為使用者考量,有這麼棒的同事真是很開心。

#下載 Pinkoi APP

你還沒有下載我們的 Pinkoi APP 嗎?快來這邊下載,一起滑滑滑買好設計吧 :)

Pinkoi_app_3_nevermai

Submit a comment

Your email address will not be published. Required fields are marked *