(1/6) New Media User Interface의 디자인 사례 - Web : 이용자에게 친절하라 1

들어가며

User Interface가 훌륭한 디자인 사례는 특별한 것은 없다.

즉, 이용자가 유무선 인터넷 서비스를 이용 - 특히 이용자의  행위를 일으키며, 미션을 수행하는(검색, 글쓰기, 구매 등) -하면서 별다른 어려움을 느끼지 못하고, 목적을 완료하는 과정에서 큰 장애를 느끼지 못하였다면, 해당 사이트는 User Interface 차원에서 매우 잘 디자인된 사이트라 할 수  있다.
그러나 인터넷 사이트를 이용하면서 본인들이 겪었던 불편이나 경험을 생각해 보면, 안타깝게도 대부분의 사람들이 한두번도 아닌 상당히 많은 빈도로 불편을 겪었을 것이다.

심지어는 본인이 하고자 하는 바를 완료하지 못하고 중간에 포기하는 일도 경험했었을 것이다. 이러한 경우들은 기획과 UI의 문제에서 발생하기도 하지만, 페이지의 오작동, 불확실한 용어의 선택 및 제공, 이용자의 기대에 상반되는 잘못된 결과 출력 등에서 발생하기도 한다.
또한 고객이 잘못된 명령을 내리거나(검색창에 잘못된 검색어를 입력하는 등), 잘못된 경험을 기반으로 기획자가 예상할 수 없는 결과를 요구하기 때문에 발생하기도 한다. 잘된 UI디자인이란 위의 모든 경우에서 이용자가 중도에 포기하지 않고, 플로우(flow)를 종료할 수 있게 만드는 것을 의미한다. 이번 단원에서는 이러한 우수한 사례를 찾아보도록 한다. 



1. 이용자에게 친절하라

     1) 이용자가 미션을 수행하는 과정에서 충분한 안내를 제공하라

     기획자는 사이트를 이용하기 위하여 이용자가 어떠한 과정을 거쳐야 하는지 명확하게 알고 있다. 그러나 안타깝게도 이용자는 매번 새로운 시도를 하여야 하며, 기획자가 내는 퀴즈를 풀어가는 느낌으로 서비스를 이용하게 된다.
이 경우 기획자가 제시한 항목을 이용자가 모두 완수하게 하기 위하여, 충분한 안내를 제공하여야 한다. 
트위터(http://twitter.com)의 경우 각 항목별로 이용자의 실시간 반응에 대한 오류 메시지를 출력한다. 또한 미션의 달성 여부를 메시지와 함께 색체로 표시하여, 이용자가 쉽게 본인의 상황을 판단할 수 있는 메시지를 제공한다.

트위터 (http://twitter.com)의 경우 회원가입시 고객의 실수를 최소화하는 UI를 제공한다.

이용자가 입력하기 전 해당 항목에서 요구하는 조건과 목정을 친절하게 표시하고 있다.

또한 고객이 정보를 입력하는 과정에서 실시간으로 진행안내를 제공하여 이용자의 혼란과 실수를 최소화 하였다. 또한 잘못된 입력에 대해서는 붉은 색을 사용하여 시각적으로 진행이 잘못되고 있음을 쉽게 알 수 있게 처리하였다















트위터보다는 가입 절차가 복잡한 또 다른 하나의 예를 보자.

     야후 코리아(http://kr.yahoo.com)에서 회원가입을 할 경우 이용자의 다양한 정보를 물어보게 된다. 이 경우 이용자는 더 많은 실수를 할 확률이 높아지게 되고 이에 따라 더욱 더 명확한 안내가 필요하게 된다.
야후의 경우 이용자가 잘못된 데이터를 입력할 경우 경고(alert)창을 출력한다. 또한 해당 창에서 이용자가 어떻한 실수를 하였고, 실수를 해결하기 위한 해결책을 제시하여 준다.또한 경고창에서 확인(OK) 버튼을 클릭하였을 경우 해당 오류항목으로 커서를 이동시켜 준다.

 

야후코리아(http://kr.yahoo.com)와 네이버(http://www.naver.com)의 회원가입 예

     다음의 경우에는 오류를 설명해 주는 과정에서 이용자가 취해야 할 다음 과정이 누락되었거나 배치가 잘못되어 있다. 이러한 페이지의 제공은 이용자를 당황하게 만들게 된다.

아래의 경우 회원가입을 위하여 실명인증을 하였으나, 해당 정보가 이미 가입한 회원으로 출력된 경우이다. 이 경우 이용자의 다음 플로우는 ‘ID찾기’를 진행해야 하나, 해당 서비스로의 링크 버튼은 페이지 하단에 작게 적용되어 있어 이용자가 쉽게 이동하지 못한다. 이 경우 확인버튼의 자리에 위치해야 한다.

아래의 경우에도 주민등록번호 입력 오류가 발생하였을 경우, 이용자의 플로우는 번호를 재입력 하거나, 고객센터에 문의를 하여야 한다. 그럼에도 불구하고 해당 서비스를 제공하는 페이지로 이동할 수 있는 링크는 어디에도 없다.

아래의 회원가입 페이지를 통하여 잘된 UI의 예를 보도록 하자

     2) 검색어 자동완성 및 오류수정

       인터넷사이트를 이용하면서 검색기능을 이용할 때 이용자는 종종 잘못된 검색어를 입력하곤 한다. 특히 한글을 영어로 입력하거나, 철자법이 잘못되거나, 또는 정확한 검색어를 알지 못하는 경우 (상품명 등)등이 있다. 이 경우에도 이용자를 위하여 편리한 UI 설계가 필요하다.

인터넷 서점의 예를 보자 ‘정의란 무엇인가’라는 책을 검색하기 위하여 ‘정의’라는 단어를 입력하였을 경우. 관련되는 제품(서적)의 목록이 지원된다. 이러한 기능을 통하여 이용자에게는 다음과 같은 편리함을 부여한다.

① 긴 검색어의 경우 입력시간을 단축할 수 있으며
② 이용자의 잘못된 검색어 입력을 최소화 할 수 있고
③ 상품명을 잘 모를 경우, 정확한 상품을 찾거나 입력할 수 있도록 지원

이번에는 포탈사이트 검색창에서 이용자가 잘못 입력한 검색어를 바로 잡아주는 구조를 보도록 한다.

 

[오타에 대한 교정]

맞춤법이 잘못 되었거나, 키보드배열에 따른 오차 (내이버) 등으로 잘못 입력되었을 경우 정상적인 검색어를 포함하여 출력

 

[외래어/외국어 교정]

외래어/외국어 의 경우 다양한 한글 입력이 이루어지게 된다. 이 경우 표준어 검색 결과로 연동

[한/영 전환]

입력시 이용자의 실수로 한/영 전환을 반대로 입력하는 경우가 있다. 이 경우에도 자동 전환된 검색어를 출력하여 준다.