동작과 명령의 패턴

동작과 명령

위의 포스트에서 이어집니다!

1. 버튼 그룹(Button Groups)
   • 관련 기능끼리 묶인 버튼의 그룹이다.
   • 인터페이스에 표시할 기능이 많으면 사용하기 좋다. 항상 노출되지 않더라도 비슷한 기능끼리 모여 있으면 어디 있는지 유저는 찾기가 편하다.
   • 간단한 예시로 우리가 사용하던 그림판을 생각해 보자. 각 도구들이 비슷한 기능들이 붙어있다. 그림이면 그리는 도구, 색, 도형의 사이즈 등을 설정하는 아이콘들이 모여있고, 텍스트 입력이면 텍스트 입력에 관한 폰트 설정, 폰트 사이즈 등의 비슷한 기능을 하는 도구들이 모여있다.
2. 호버(Hover) 또는 팝업 툴(Pop-Up Tools)
   • 어떠한 동작을 수행하기 위해 마우스를 올리면 선택할 수 있는 기능들이 나타난다.
   • 역시, 마찬가지로 항상 화면에 노출 시키킬 필요가 없으므로, 나타내야할 기능들이 많을 때 사용하기 좋다.
   • 가급적이면 기능이 작동하는 영역에서 가까운 상단이나 옆으로 배치하는것이 좋다.
   • 호버 되면 보여줄 목록이 들어가야 하기 때문에 공간의 여유를 두고 만들어야 한다.
   • 예시로는, 유튜브에서 동영상을 재생 중일 때는 하단의 볼륨이나 재생시간 등이 보이지 않다가 마우스를 올리면 다시 노출된다.
3. 조작 패널(Action Panel)
   • 단순한 기능목록의 나열이다.
   • 가장 많이 쓰이며, 사용자가 자주쓰는 기능 등을 추천해 줄 수도 있다. 덕분에 유저에게 익숙하다.
   • 기능이 너무너무 많을경우 사용할 수 있다. 호버나 팝업으로 띄우기는 것도 한계가 있을 정도로 많을 경우 사용한다.
   • 배치하는 방법은 UI에 조작 패널을 배치한 후에, 기능을 구조화시켜서 알맞은 목록에 기능들을 정리하고 각 레이블을 기능에 지정한다.
   • 예시로는, 윈도우 OS의 윈도우 버튼을 누르면 나오는 시작 메뉴이다.
4. 완료 버튼 강조(Prominent Done Button)
   • 최종단계의 버튼 등의 강조가 필요한 버튼만 다른 스타일을 준다.
   • 예를 들어, 쇼핑 사이트의 결제하기 버튼의 색을 다른 버튼들과 차이를 둘 수 있다.
5. 지능형 메뉴 항목(Smart Menu Items)
   • 유저의 행동과 상황에 맞춰 동적으로 메뉴를 다르게 보여준다.
   • 인터페이스가 직관적으로 변하기 때문에 유저의 실수를 줄일 수 있다. 지금 작업 중인 요소의 메뉴만 있기 때문에 공간적으로도 유리하다.
   • 예시로는, Mac OS의 최상단 매뉴바를 예로 들 수 있다. 하고 있는 작업에 따라 메뉴가 바뀐다.
6. 미리 보기(Preview)
   • 어떤 행동을 했을 때 결과가 어떤지 보여준다.
   • 특히, 큰 파일을 열거나 수정했을 때 결과를 미리 볼 수 있다면 원하지 않은 결과가 나와서 다시 돌아가야 할 때 시간을 크게 줄일 수 있을 것이다.
   • 예를 들어, 사진 편집 등을 할 때, 여러 가지 필터를 사용할 수 있다. 이때 미리보기를 이용해 어떤 필터가 가장 최적인지 살펴보고 적용할 수 있다.
7. 스피너(Spinner)와 로딩 인디케이터(Loading Indicator)
   • 사용자가 선택한 기능을 수행하고 완료하기까지 걸리는 시간에 보여줄 수 있다.
   • 유저는 응답을 기다리는 동안 올바로 요청이 보내 진 것인지 알 수 있다.
   • 진행도를 함께 표시할 수 도 있다.
   • 스피너는 빙글빙글 돌아가는 애니메이션의 모습이고, 로딩 인디케이터는 지금의 진행도에 해당하는 막대가 왼쪽부터 오른쪽으로 채워지면서 끝까지 가면 100%가 되는 우리가 로딩에서 자주 볼 수 있는 모습이다.
8. 취소 가능성(Cancelability)
   • 시간이 오래 걸리는 작업을 기다릴 때 유저는 취소할 수 있다.
   • 유저가 상황을 컨트롤할 수 있게 하는 것은 오류 예방과 복구에 도움을 줄 수 있다.
   • 예시로는, 구글 플레이 스토어나 앱스토어에서 애플리케이션을 다운로드하고 있을 때 X 버튼으로 취소할 수 있는 경우이다.
9. 매크로(Macros)
   • 동작들을 기억했다가 그 동작들을 묶어서 계속 실행시켜 준다.
   • 반복되는 동작이 필요할 경우 유저는 편하게 매크로를 사용할 수 있다.
   • 예시로는, 모바일 기기로 사진을 찍으면 자동으로 클라우드 시스템에 업로드시켜주는 서비스 등이 있다.

결국, 가장 중요한 것은 중요한 동작이 가장 잘 보이도록 만드는 것이다. 사소한 기능들이라고 해도 유저가 느끼기에 안정감과 빠르고 효율적인 탐색은 UX를 크게 상승시킨다. 이를 위해 유저가 앱을 사용할 때의 Flow에 더 집중하여 계속 개선해 나갈 수 있다.