유용성이 뛰어난 '웹 UI'를 구현한 웹 사이트 사례 8가지

2016.08.30

|

14166

유용성이 뛰어난 '웹 UI'를 구현한 웹 사이트 사례 8가지

좋은 ‘웹 UI’는 사용자들이 웹 사이트를 혼란 없이 쉽게 이용할 수 있도록 돕습니다. 이는 모든 클라이언트의 바람이며 많은 프리랜서들의 목표이지요.
좋은 ‘웹 UI’가 무엇인지 정의하는 방법은 다양하지만, 오늘 프리랜서 가이드에서는 유명 리서치 기업인 Nielsen Norman Group이 정의한 ‘유용성 특징’을 참고하여 좋은 유저 인터페이스 경험을 가지고 있는 웹 사이트를 살펴보도록 하겠습니다.

Nielsen은 ‘유용성(Usability)’을 다음과 같이 다섯 가지 특징으로 구분 지어 정의합니다.

  • 학습 용이성: 사용자가 어렵지 않게 목적을 달성할 수 있는가?
  • 효율성: 사용자가 단번에 원하는 목적을 달성할 수 있는가?
  • 기억 용이성: 사용자가 차후에 웹 사이트를 방문했을 때도 사용법을 기억할 확률은 얼마나 되는가?
  • 오류: 사용자 오류의 확률을 줄이기 위해 인터페이스가 몇 단계를 거치고 있는가? 그리고 사용자는 어떻게 오류를 수정할 수 있는가?
  • 만족도: 사용자는 사용 경험을 즐겼는가?

이와 같은 특성들을 기본으로 하여 자신만의 브랜드 성격을 잘 구현하는 ‘웹 UI’가 바로 훌륭한 UI라고 할 수 있지요. 훌륭한 ‘웹 UI’는 사용자들에게 즐거운 경험을 제공해주며, 이는 치열한 시장경쟁에서 생존을 보장해줍니다.

유용성이 뛰어난 ‘웹 UI’를 가진 웹사이트 사례 8가지

1. Medium
MEDIUM 웹 UI 사례

Medium은 온라인 독서 및 출판 플랫폼입니다. 이 웹사이트는 필요한 기능을 잘 구현할 뿐만 아니라 아주 매력적인 사용자 경험을 제공합니다. 최소한의 색채 사용과, 탁월한 타이포그라피 선택 및 조합, 그리고 넉넉한 행간 등 웹 사이트가 갖추어야 할 모든 요소를 제대로 구현해내고 있습니다.
Medium에서는 무엇보다 콘텐츠가 가장 중요합니다. 사용자가 로그인을 하면, 기사 목록 가장 위에 “Write here” 팝업 박스가 나타나 모든 사용자가 쉽고 빠르게 글을 쓸 수 있도록 도와줍니다. 만약 사용자가 “Write a Story”링크를 클릭한다면, 새하얀 페이지가 나타납니다. 다른 요소들은 지워버리고, 오로지 쓰기에만 집중할 수 있는 깨끗한 공간을 제공하는 것이지요.
그렇게 작성된 글들은 읽기 편하도록 깔끔히 정리됩니다. 해당 글을 읽는데 걸리는 예상 시간을 알려주고, 특정 글에 하이라이트 기능을 사용하거나 즉각적인 피드백을 보내는 기능 등 사용자의 편의를 위한 다양한 기능들도 갖추고 있습니다.

2. Airbnb

Airbnb 웹 UI 사례
Airbnb 웹 사이트의 ‘웹 UI’는 두 가지 특징을 가지고 있습니다. 하나는 이전에는 전혀 알지 못했던 두 사람 사이에 신뢰를 형성하는 것이고, 다른 하나는 머물 공간을 예약하는 것이지요.
에어비앤비는 집에서 숙소예약을 할 때의 절차를 간소화하는 것을 최우선으로 목표했습니다. “현지인처럼 살아보세요(Live There)”라는 자연스러운 카피와 함께, 사용자로 하여금 다음 여행을 계획하게끔 유도하고 있습니다.
이 친근한 초대는 브랜드의 목소리를 잘 드러냄과 동시에 머물 곳을 찾는 과정을 간소화합니다. 여러분이 장소 검색을 위해 초기에 입력해야 하는 특정 항목은 많지 않습니다. 가고자 하는 장소를 선택하고, 체류 기간과 인원수를 입력하면 됩니다. 세부적인 항목들은 다음단계로 미루어 예약 과정은 능률적이며, 접근성이 높지요.
상세설명 페이지에는 추가 비용이 발생할 수 있는 모든 항목이 이해하기 쉽도록 설명되어 있습니다. 그리고 바로 이 항목들 아래 예약 요청 버튼이 있습니다. 이 버튼은 가장 눈에 띄게 디자인되어 사용자가 숙소 예약 과정을 종료하도록 쉽게 유도합니다.
Airbnb 웹 UI 우수사례
사용자가 숙소를 정하고 예약 요청을 하게 되면, 다음으로 결제 화면이 나타납니다. 이 페이지에서 숙소와 관련된 모든 정보는 페이지 오른편에 위치하며, 사용자는 관련 정보를 다시 확인하기 위해 이전 페이지로 돌아갈 필요가 없지요. 또한 실제 결제가 이루어지기 전에 호스트에게 자신을 소개하는 팝업 대화 창이 나타납니다. 이는 에어비앤비가 거래가 아닌 대화에 중요성을 두며, 이를 통해 낯선 사람들이 서로 어울릴 수 있도록 만드는 것에 목표를 두고 있는 점을 알 수 있는 부분이지요.
에어비앤비의 UI는 똑똑한 카피 문구와 주의를 끄는 멋진 사진들과 영상들을 사용하여 모르는 사람들이 서로 신뢰와 유대를 쌓을 수 있는 특별한 분위기를 형성합니다.

3. Boosted Boards

Boosted Boards 웹 UI 사례
Boosted Boards는 전동 스케이트 보드를 소개하고 판매하는 개성 있는 웹 사이트입니다. 사용자가 웹 사이트를 방문하자 마자 제품을 소개하는 멋진 영상이 재생됩니다. 이 사이트의 ‘웹 UI’는 제품이 조명을 받을 수 있도록 길을 비켜주고 있지요. 유저가 “Reserve for $100” 버튼을 클릭하면 새로운 페이지가 나타나지 않고 계산 팝업 상자가 나타납니다. 사용자는 메인 페이지를 벗어나지 않고도 쉽고 빠르게 제품 예약을 할 수 있습니다.
Boosted Boards 우수 웹 UI 사례
스크롤을 내리면 굵은 회색 글씨가 적힌 일련의 패널들이 나타나며, 여기서 제품과 관련된 간단한 영상을 재생할 수 있습니다. 이를 통해 사용자는 특별한 방식으로 제품의 기능을 볼 수 있습니다. 회색 텍스트 덕분에 사용자의 눈길은 제품 영상이 재생되는 부분과 “Reserve Now” 버튼으로 집중됩니다. Boosted Boards의 UI는 제품의 매력적인 부분에 스포트라이트를 비추며 사용자들의 편의를 돕습니다.

4. Dropbox

Dropbox 웹 UI 사례
Dropbox는 가장 이해하기 쉬운 인터페이스를 가진 서비스 중 하나입니다. 폴더와 파일 구조는 누구나 쉽게 이해할 수 있습니다. 대부분의 유저는 데스크톱의 파일을 드래그해서 폴더에 넣으려고 시도할 것입니다. 사용법을 모르더라도, 그렇게 하는 것이 너무나도 익숙하기 때문이지요.
Dropbox 우수 웹 UI 사례
편안한 일러스트레이션 또한 드롭박스의 친근한 브랜드 이미지를 잘 나타냅니다. 인터페이스에 가벼운 일러스트레이션을 추가하는 것으로 사용자는 제품을 오래된 친구처럼 느끼게 되며, 쉽게 다른 유저들과 파일을 공유하게 됩니다.

5. Virgin America

Virgin America 웹 UI 사례
항공권 예매 사이트 중에서 Virgin America만큼 단순하고 깨끗한 웹 사이트는 없습니다. 이들은 사용자가 가진 단 하나의 목적을 정확히 파악하고 있습니다. 바로 항공권을 예매하는 것이지요. 다른 요소들을 모두 지우고 목적지를 입력하는 것만 남겨두어 즉각적으로 예매를 시작할 수 있게 돕고 있습니다.
Virgin America의 ‘웹 UI’는 사용자가 빠르고 효율적으로 목적을 달성할 수 있도록 디자인되어 있지요. 예약을 진행하는 동안, 스크린 상단에는 ‘현재 선택한 항공권’과 관련된 정보가 막대 형태로 따라다닙니다. 이렇게 선택한 항공권과 관련된 정보를 지속적으로 보여주기 때문에 사용자는 정보를 기억하기 위해 애쓸 필요가 없으며, 쉽게 선택을 수정하거나 확인할 수 있습니다.
경쟁 사이트보다 시각적으로 두드러지는 점이 가장 큰 장점입니다. 밝은 색채와 그라데이션, 재미있는 일러스트레이션 등을 활용하여 타 경쟁 사이트보다 눈에 띄는 브랜드 이미지와 경험을 창출해냅니다.

6. Operator

Operator 웹 UI 사례
Operator는 채팅을 기반으로 하는 모바일 앱입니다. 이 사이트가 가진 목표는 단 하나, 사용자가 앱을 다운로드 하도록 유도하는 것입니다. 메인 페이지에는 오퍼레이터가 어떤 앱인지를 명확히 알려주는 헤드라인과 태그라인이 있습니다. 페이지에서 가장 큰 창을 통해 사용자가 본인의 전화번호를 입력하면 페이지는 자동으로 스크롤되어 앱 작동 방법을 보여줍니다.
Operator의 ‘웹 UI’는 실제 앱을 사용했을 때 사용자가 경험하게 될 재미있는 요소들을 미리 보여줍니다. 그리고 하나의 메인 페이지를 기본으로 설정함으로써 사용자가 어플리케이션을 다운로드하고 사용하도록 장려하는 데 집중합니다.

7. Frank and Oak

Frank and Oak 웹 UI 사례
남성복 전문 사이트인 Frank and Oak는 사용자의 시선을 끌고, 그들의 취향을 포착하기 위해 UI를 사용합니다. 아주 직선적이고 단순한 온라인 쇼핑 경험을 제공하면서 동시에 커다란 사진과 깨끗한 산세리프 폰트로 브랜드 성격을 드러내어 주요 타겟 층에게 어필합니다.
20160830_wishket_FG_image12
제품을 클릭하면 설명 페이지가 나타납니다. 이 페이지에서 제품사진과 콜투액션 버튼만 다른 색으로 채색이 되어 눈에 띕니다. 사이즈를 선택하기 전에 장바구니에 담기 버튼을 누른다면 무채색으로 바뀌며 사이즈를 먼저 고르라는 안내 문구가 나타납니다. 색으로 직관적인 가이드라인을 제공하는 것이지요.
20160830_wishket_FG_image13
온라인 쇼핑 몰에서 처음 주문을 할 때 고객 정보와 배송지 정보를 입력하는 일은 언제나 귀찮고 성가신 일입니다. Frank and Oak는 개인 정보 입력 단계를 여러 조각으로 나누어 제시하면서 사용자들이 느끼는 부담감을 최소화하려 노력했습니다.

8. Semplice Labs

Semplice Labs 웹 UI 사례
디자이너인 Tobias Van Schneider가 만든 워드프레스 포트폴리오 사이트입니다. 첫 페이지에서부터 헤드라인의 카피의 색 배치가 “Secret”과 “Get Semplice”버튼을 영리하게 묶어냅니다. 사용자는 자연스럽게 본인들이 놓치고 있던 비밀이 무엇인지 알기 위해 제품을 구매하려고 하는 것이지요. 여기서 사용되는 카피 문구 역시 사용자로 하여금 Semplice에 대해 더 알아보고 싶은 욕망을 갖게 합니다.
나머지 ‘웹 UI’는 사용자가 제품을 사용하여 그들 자신의 웹 사이트에서 이뤄낼 수 있는 것이 무엇인지를 보여줍니다. 움직이는 애니메이션과 부드러운 페이지 전환은 사용자에게 깊은 인상을 남기지요.

접근성이 높고 혼선이 없는 ‘웹 UI’를 구축하는 것은 사용자와 긍정적인 유대를 맺는 중요한 방법입니다. 인터페이스를 디자인하거나 평가할 때, 서론에서 살펴본 Nielsen의 가이드라인과 8가지 예시들을 참고하여 훌륭한 ‘웹 UI’를 구축하시길 바랍니다.
위시켓은 프리랜서 디자이너분들이 일하는 데에 도움이 될 만한 다음 프리랜서 가이드를 통해 찾아 뵙겠습니다. 🙂

함께 보면 좋은 콘텐츠

20150425_하단이미지_v4

앱 개발 비용 궁금하세요?
위시켓이 바로 알려드릴게요!

UI 개선 사례웹 UI웹 UI 디자인웹사이트 UI홈페이지 UI
다음 글

위시켓 블로그의 새로운 소식 받기