brunch

매거진 IRO UX고민하기

라이킷 12 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 다시마조림 Dec 16. 2015

Everybody Does Right Wrong

UX 고민하기

최근에 본 포스팅 중에 좋은 게 있어서 국문으로 정리하려고 한다.

원본> http://ish.re/J441

Everybody Does Right Wrong

The right arrow is a popular navigation tool but it lacks a consistent style and function, creating

uxmag.com

사용자가 화면에서 어떻게 쓰는지 UI를 쉽게 이해할 때, 편리한 인터페이스를 제공한다고 할 수 있다.

[X] 버튼은 종료를 의미하고 동그라미에 세로 선은 전원 버튼을 의미한다. 3개의 선(햄버거 모양)은 빠르게 [메뉴 표시]로 받아들여지고 있다.

하지만, 오른쪽 화살표는 다수의 기능을 뜻하며 포괄적으로 사용되고 있다.

■오른쪽 화살표를 4가지 타입

1. [→] 문자 그대로의 기호 (Unicode: 2192).

2. [▶] 삼각형인데 한 꼭짓점이 오른쪽으로 향한 모양 (Unicode: 25B6).

3. [>] 홑 화살 괄호(영어로 greater than이라고 하는데 국문은 처음 알았다. -_-) (Unicode: 003E).

4. [>>] 겹 화살 괄호

삼각형 기호는 항상 그런 것은 아니지만 음악/비디오 또는 슬라이드 쇼에서 재생의 의미로, 초기 설정에서는 시작의 의미로, 폴더에서는 펼치기/메뉴 보기의 의미로 사용된다.

이렇게 하나의 아이콘이 다양하게 사용되는 것은 놀랍기만 하다. 다른 것들도 살펴보자

1. Literal Arrow

최근에 화살표 기호를 잘 쓴 앱은 인스타그램이다.

사진을 빠르게 찍고, 사용자가 필터 효과를 추가할 때 [다음 단계]로 진행하는 것으로 사용되었다.

안드로이드 앱은 여전히 해당 화살표 아이콘을 사용하고 있지만, 아이폰에서는 선택 가능한 [Next] 텍스트 버튼으로 변경되었다.

왼쪽으로 복귀하는 화살표도 그렇고 꽤 직관적이다.

Microsoft Office arrow

Microsoft Onedrive arrow

Window Phone arrow

마이크로소프트는 화살표 기호를 다양하게 사용하고 있는데, App에 따라 다른 의미로 사용되고 있다.

마이크로 오피스 모바일과 OneDrive는 둘 다 슬라이드 쇼 형식으로 제공되는데, 오피스의 원+화살표 버튼을 통해 다음 단계로 진입한다. 반면에 OneDrive는 점 인디케이터를 통해서 Swipe 동작을 유도한다. 이런 부분이 두개의 앱의 일관성이 없어 보이게 한다.

안드로이드의 윈도우 폰을 보면 좀 당황스럽다.

상단에 인디케이터가 보이고 얼마만큼의 단계를 완료했는지 보인다. 화면 가운데 화살표는 안드로이드 기기가 윈도우 폰 기기로 전환되는 의미로 사용되었고 하단 가운데에는 [Next] 버튼이 표시된다. Swipe 동작은 지원하지 않으며, 1년 동안 업데이트도 되지 않고, 윈도우폰에 부적절한 앱들을 추천하고 있다.

2. 삼각 화살표

항상 정삼각형으로 표현되기 때문에 오른쪽 화살표라는 의미로 이해하는데 당혹스러울 때도 있다.

이런 부분이 Mac OS X 파인더의 기본 내비게이션에도 문제로 보이기도 한다.

폴더의 우측 삼각형 아이콘을 선택하면, 밑을 보는 삼각형으로 전환되고, 현재 폴더 내의 콘텐츠가 표시된다.

이등변 삼각형이었다면 더 이해하기 쉬웠을 것 같다. 적어도 한 개의 꼭짓점이 다른 두개와는 다르게 보이기 때문이다. 그러나 정삼각형은 깔끔해 보이고, 대칭적으로 보이기 때문에, 사람들의 axial bias를 통해 충분히 이해되는 것 같다.

Netflix는 웹사이트에 영화 타이틀을 스크롤하기 위해, 약간 납작한 삼각형을 사용하고 있다. 사용자가 클릭하지 않고 마우스 커서만 오버해도 영화 타이틀과 텔레비전 방송들이 부드럽게 펼쳐진다.

아마도, 정삼각형이 깨끗해 보이기 때문에 많은 곳에서 사용되는 것 같다. 테이프 기기를 시작으로 오랫동안 오디오와 비디오의 재생 버튼으로 사용되었다.

재생 의미뿐만 아리라 Youtube 로고로 사용되는 것도 놀라운 일이 아닐 것이다.

구글은 Youtube 뿐만 아니라, 구글 플레이의 아이콘으로도 사용하고 있다.

3. 홑 화살 괄호

구글 플레이의 앱 페이지에 진입하게 되면, 이미지랑 비디오 표시 부분에 [홑 화살 괄호]를 볼 수 있다.

마우스, 터치패드, 터치 스크린이라면 이미지를 swipe 해서 볼 수 있다. 단순히 [홑 화살 괄호 버튼]을 선택하지 마라. 어떤 이유에서인지 바로 스크롤되는 것이 아니라, 첫 번째 이미지가 확대되어 표시된다. 첫 번째가 비디오라도 동일하게 동작한다.

확대된 다음에, 홑과 살 괄호는 이미지들을 스크롤한다. 그리고 하단에 비슷한 앱들이 추천된다. 하단에 같은 컨트롤이 제공되는데, 동작은 현재 그룹에서->다른 그룹으로 표시된다.

한 개의 버튼이 다른 동작을 한다는 것이 헷갈리지 않는가?
이것이 이 기사의 핵심이 아닐까?

버튼은 콘텐츠 표시에 방해되면 안 된다. Netflix는 콘텐츠 위에 별도로 버튼을 표시했다. 그러나, Craked's 모바일 사이트에서는 각 이미지에 사이드에 공간이 있지만 슬라이드쇼 컨트롤이 각 이미지 위에 표시된다. 반면에 PC에서는 같은 슬라이드쇼지만 그 사이드 공간에 컨트롤이 표시된다.

오버레이 컨트롤 경우는 이미지를 탭 하면 표시된다. 컨트롤이 표시되기 전에 Swipe 할 수 있다. 약간 주제에서 벗어나, 모바일 캡쳐 화면에서 상단에 회색 원 버튼을 보면, 위 방향의 삼각형 버튼은 페이지 맨 위로 올라가는 버튼이다. 화면을 가리지 않았으면 좋겠다.

4. 겹 화살 괄호

마지막으로, 당신이 보고 싶지도 않았던 장소에 건너뛰고 싶은가? 저 메시지는 (의도하지는 않았겠지만) ComputerWorld와 Forbes로 이동하는 메시지이다. "Continue to site>>"는 광고를 건너뛰게 하지만. 반면에 구글 뉴스는 >> 기호를 지난 헤드라인과 관련된 이야기들로 이동하게 한다.