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

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에 더 집중하여 계속 개선해 나갈 수 있다.

1. 모바일 환경에서 주로 쓰는 인터페이스에서의 동작

1. Tap(탭)
   • 모바일 화면을 손가락으로 짧게 누른다.
   • 마우스의 클릭에 해당한다.
   • 개체를 선택하는 등 가장 많은 기능을 한다.
2. swipe(스와이프)
   • 화면을 눌러 상하좌우 방향으로 날리듯 긁는다.
   • 스크롤에 해당한다. 하지만 모바일 환경에서는 더 다양한 기능을 하기도 한다.
   • 목록의 이동이나 설정 등을 불러올 수 있다.
3. pinch(핀치)
   • 화면을 양 손가락으로 안쪽으로 움직여서 늘리거나 밖으로 움직여서 줄인다.
   • 모바일에서 중요한 기능이다. 화면이 작기 때문에 크게 늘려서 볼 수 있다.
4. 회전
   • 모바일 기기를 가로나 새로로 다시 잡는다.
   • 물론, 데스크탑으로는 불가능하다.
   • 가속도계와 같은 센서가 모바일 디바이스에는 장착되어 있으므로 움직임을 읽어 화면 방향을 바꿔준다.
   • 가로로 돌리면 동영상과 같은 컨텐츠를 즐기기 편하다.
5. 흔들기
   • 모바일 기기를 흔든다.
   • 회전과 같이 모바일 기기에서만 가능하고, 역시 가속도계 등의 센서를 이용한다.
   • 음악 플레이앱에서 다른 음악으로 전환하는 등의 기능을 할 수 있다.

2.  모든 환경에서 가능한 인터페이스 동작

1. 버튼
   • 인터페이스 바로 위로 배치하는 것이 좋다. 유저는 다른 동작이 필요 없이 바로 버튼을 볼 수 있어야 하기 때문이다.
   • 가장 쉬운 동작에 해당한다.
2. 메뉴바
   • 데스크톱 환경에서 많이 사용된다.
   • 전체 기능등을 묶어서 한 번에 보여주기 유리하다.
3. 팝업 메뉴
   • 클릭이나 탭에 따라 짧게 작은 알림을 띄울 수 있다.
   • 길면 좋지 않다. 화면을 너무 가려서도 안된다. 사용에 불편할 수 있기 때문이다.
4. 드롭다운 메뉴
   • 콤보박스등을 누르면 옵션들이 나열된다.
   • 동작을 실행하기 보다, 옵션을 바꾸는 것에 사용된다.
   • 기능에 사용하지 않는 것이 좋다. 불편하다.
5. 툴바
   • 아이콘이나 짧은 텍스트를 나열하여 접근성을 높일 수 있다.
   • 드롭다운이나 선택기능이 같이 있는 경우도 있다.
   • 너무 긴 설명이나 아이콘이 적절히 없을 때는 다른 기능을 사용하는 것이 좋다.
6. 링크
   • 파란색으로 표시된 텍스트로, 누르면 다른 사이트로 이동하거나 새로운 탭이 열린다.
   • 물론, 파란색이 아닐 수 도 있다. 디폴트는 파란색이다.
7. 조작 패널
   • 항상 화면에서 유저가 볼 수 있는 패널이다.
   • 기능이 시작적으로 보이는 것 보다 편할 때 툴바 대신 사용할 수 있다.
8. 호버 툴
   • 각 항목에서 2개 이상의 기능을 실행 할 수 있을 때, 항목에 마우스를 올리면 버튼을 보여줘서 너무 많은 요소들이 화면에 나오는 경우를 줄일 수 있다.
   • 터치 스크린에서는 사용이 쉽지않다.
   • 기능이 숨겨져 있기 때문에 유저가 이곳에 호버 툴이 있다는 것을 알 수 있어야 한다.
9. 드래그 앤 드롭
   • 마우스나 탭으로 요소를 꾹 누른 상태로 다른 위치로 가져다 놓는 것을 말한다.
   • 항목들을 이동하거나 복사, 붙여 넣기 등에 사용된다.
10. 텍스트 명령
    • CLI로 직접 명령어를 입력하여 기기에 명령을 내린다.
    • 요즘에는 GUI로 시각적 표현이 되는  경우가 많기 때문에 잘 사용하지 않는다.
11. 어포던스
    • 버튼 등에 호버 툴이나 드래그 앤 드롭 등의 기능이 있다는 것을 표현하기 위해 쓰이는 기능을 말한다.
    • 색을 다르게 한다던가, 호버 스타일 등으로 차별을 두어 표시할 수 있다.

1. 목록의 유스케이스

• 유저는 어떨 때 목록을 사용하려고 할까?
  1. 전반적인 개요
     • 전체적인 페이지의 인상을 한 번에 파악할 수 있다.
  2. 항목 브라우징
     • 어떻게 메뉴를 정렬해서 볼지 결정할 수 있다. 혹은, 뒤로 돌아가는 등의 다른 항목으로의 이동할 때 도 사용할 수 있다.
  3. 특정 항목의 검색
     • 무언가 기능을 찾을 때 사용한다. 유저의 액션을 줄여 최대한 빠르고 정확하게 메뉴를 보여주는 것도 중요하다.
  4. 정렬과 필터링
     • 요소들의 정렬이나 필터로 필요한 항목을 빠르게 찾을 수 있게 만든다.
  5. 항목 재정렬, 추가, 삭제
     • 유저의 저장목록을 보여주거나, 선택과 추가, 혹은 삭제가 필요할 때도 유용하다. 음악 재생앱의 플레이 리스트를 생각하자!

2. 정보의 구조 떠올리기

• 매뉴를 구성하고자 할 때, 생각해야 할 것들에 대해 알아보자
  1. 길이
     • 메뉴의 사이즈가 요소들을 다 넣을 수 있는가? 혹은, 잘리는 부분도 있을까?
     • 그렇다면, 페이지에서 메뉴의 사이즈는 어떤가? 너무 크지는 않을까?
  2. 순서
     • 알파벳순이나 숫자, 수정시간 등 정렬하는 방식이 있나?
     • 정렬되는 규칙은 유저가 필요하고 찾는 기능에 맞게 되어있는가?
  3. 그룹 핑
     • 요소들이 한 번에 알아보기 쉽게 묶여있을까?
     • 계층들이 나눠져서 카테고리를 알아보기도 편할까?
  4. 항목의 종류
     • 유저가 찾는 종류의 카테고리가 다 있는가?
     • 이미지 등으로 카테고리를 한 번에 구분이 가능한가?
     • 너무 복잡하지 않은가?
  5. 인터랙션
     • 항목을 전부 다 보여줄 것인가? 아니면 가려서 대표적인 것만 일단 노출시킬 것인가?
     • 유저의 쓰임에 따라 버튼이 편할까? 링크가 편할까?
  6. 동적 행동
     • 유저는 목록의 변화를 실시간으로 볼 수 있나?

3. 패턴

1. 2 분할(Two-Panel Selector) 또는 분할 화면(Split View)
   • 무엇인가요?
     • 화면을 두 개로 갈라버린다. 가로든 새로든 상관없다.
     • 목록과 선택한 항목을 중요하게 보여줘야 할 때 사용할 수 있다. 예를 들어, 음악 재생 앱의 경우 노래를 클릭하면 그 노래에 앨범 아트와 다른 쪽에는 내가 듣고 있는 플레이 리스트를 함께 보여주는 경우가 이에 해당한다.
     • 관행적인 디자인이다. 그만큼 친숙하다.
     • 유저가 시선을 빠르게 바꾸기 용의 하다.
   • 어떻게 활용할까요?
     • 선택할 수 있는 목록은 상단이나 왼쪽에, 상세 내용은 하단이나 오른쪽에 배치한다. 왼쪽에서 오른쪽으로 언어를 읽고 사용하는 수많은 국적의 유저들이 그것이 친숙하기 때문이다.
     • 시각적으로 보기 편하게 만드는 것이 좋다. 배경색과 너무 반전되는 색을 사용하거나 하면 잘 안 뜨인다.
2. 단일 화면 상세 진입(One-Window-Drilldown)
   • 무엇인가요?
     • 하나의 화면에서 목록을 보여주고, 목록을 선택하면 큰 화면으로 새부사항을 보여준다.
     • 목록과 상새화면이 나눠져 있지 않다. 예를 들어, E-mail을 생각하면 정확하다.
     •  모바일 화면을 디자인할 때 유용하다. 모바일 디바이스의 작은 화면에서 모든 정보를 한 번에 보기 쉽지 않기 때문이다.
   • 어떻게 활용할까요?
     • 최신의 디자인이 유리하다. 요즘은 섬네일 그리드나 인스타그렘의 피드 같은 형식이 많은 유저들에게 친숙하다.
     • 꼭 뒤로 가기와 취소 버튼을 만들자. 없으면 슬프다.
     • 위계를 유용하게 사용할 수 있다. 내부에 들어가거나 혹은 평행으로 이동하여 계층적인 효과를 활용할 수 있다.
3. 포괄 목록(List Inlay)
   • 무엇인가요?
     • 한 줄에 모든 요소를 넣는다.
     • 목록 하나에 많은 정보를 담을 수 있다. 예를 들어, 대중교통 예매를 할 때 다양한 정보를 한 번에 담아서 시간별로 펼쳐 목록으로 보여주는 모습을 볼 수 있다.
   • 어떻게 활용할까요?
     • 2 분할 계층과 같이 사용해서 3분할로 사용도 가능하다.
     • 햄버거 버튼 등을 이용해 목록을 펼쳤다가 접었다가 하면 더 깔끔할 수 있다.
     • 이때, 전환 애니메이션으로 유저의 방향 감각을 유지시켜 주자.
4. 카드(Cards)
   • 무엇인가요?
     • 가장 인기 있는 UI.
     • 사이즈가 반응형으로 조절되고 이미지를 크게 보여줄 수 있는 예를 들어, 우리 휴대폰에 있는 사진첩을 생각하면 된다.
   • 어떻게 활용할까요?
     • 전부 비슷한 동작이 필요한 요소들이 있을 때 유리하다. 사진을 누르면 크게 볼 수 있으며, 전부 비슷한 사이즈의 텍스트가 있고, 세부적으로 조절할 수 있는 편집기능이 있는 것이 모든 사진이 같으므로 유리한 디자인이라고 할 수 있다.
     • 사이즈가 요소별로 다르더라도 조절해서 나열할 수 있다.
     • 사용자의 액션을 생각해서 가장 빠르고 정확히 원하는 일을 할 수 있게 만들어야 한다.
     • 가로나 세로배치 혹은, 텍스트의 길이 등을 고려한 요소의 정렬이 중요하다. 시각적으로 보여주는 부분이 큰 패턴이기 때문이다.
5. 섬네일 그리드
   • 무엇인가요?
     • 이미지를 특정한 기준에 따라 정렬하고 N X M의 배열로 보여준다.
     • 이것도 카드와 비슷하지만 정렬하는 기준이 조금 다르다. 예를 들어, 사진첩에서 찍은 날짜나 찍은 장소별로 정렬하면 섬네일 그리드로 패턴이 바뀐다.
   • 어떻게 활용할까요?
     • 정렬 기준이 명확할 때 사용하기 좋다.
     • 꽤 많은 항목을 표현하기 유리하다. 정렬되는 이미지의 사이즈가 같기 때문이다.
     • 그렇기 때문에 모바일에서도 누르기 쉽다.
     • 세로, 가로의 크기가 동일할 때 사용하기 좋다. 아니면 이미지가 어색하게 잘리거나 할 수 있다.
6. 캐러셀(Carousel)
   • 무엇인가요?
     • 시각적으로 표현해야 할 것이 있을 때, 이미지를 앞, 뒤로 당겼다가 밀면서 스와이프 할 수 있는 패턴이다.
     • 목록에 시각적으로 대표적으로 보여줄 수 있는 시각적 표현이 있을 때 사용하기 좋다. 예를 들어, OTT 서비스의 영화나 드라마의 포스터라거나 음악 앱의 앨범 아트 등을 밀면서 선택도 가능한 패턴을 생각하면 좋다.
   • 어떻게 활용할까요?
     • 일단 보기 예쁘다. 요소를 매력적으로 표현하기 좋다.
     • 다음 항목이나 이전 항목을 함께 볼 수 있다.
     • 공간이 좁으면 쓰기 좋다. 밀고 당기면 계속 요소들을 보여줄 수 있다.
     • 세로 비율이 길어야 한다. 가로가 길면 어색해 보인다.
     • 가로 스크롤이 있는 위젯은 섬네일은 가로로 배치한다.
7. 페이지네이션(Pagination)
   • 무엇인가요?
     • 매우 긴 목록을 보여줄 때 유리하다. 예를 들어, 인터넷 게시판 등의 글 목록을 말한다.
     • 검색 기능이 거의 필수이다. 요소가 많을 때 사용하기 때문이다.
     • 서버 쪽의 통신에도 유리하다. 조금씩만 정보를 가져와서 일단 보여주고 다음 유저의 행동에 의해 다음 정보를 요청하기 때문이다.
   • 어떻게 활용할까요?
     • 일단 몇 개의 요소를 보여줄지 정하는 것이 중요하다.
     • 그러므로, 유저가 사용하는 기기의 사이즈가 또 중요하다. 가독성이 떨어지면 의미가 없다.
     • 어떻게 유저의 액션에 따라 다음 페이지로 넘어갈 수 있을지를 확실히 보여주고 간단한 액션으로 넘길 수 있게 한다.
     • 가장 중요한 것은 '첫 화면'이다. 처음 화면에서 유저가 머무는 시간이 많기 때문이다. 그래서 처음 화면에서 필요한 정보를 찾을 수 있게 하는 것이 유리하다.
8. 항목으로 즉시 이동하기(Jump to Item)
   • 무엇인가요?
     • 최상단에 input을 만들어 검색을 가능하게 하고 한쪽 목록에서 요소를 누르면 한 번에 이동하게 한다.
     • 예를 들어, 액셀이나 VS code의 파일 탐색기를 생각하면 좋다.
     • 많은 목록들을 보여주고, text나 제목의 중요성이 있을 때 사용하기 좋다.
   • 어떻게 활용할까요?
     • 많은 목록을 보면서 정확한 요소를 찾을 때 즉, 전문가들이 사용하기 좋은 패턴이다.
     • 키보드에서 모든 작업을 가능하게 한다.

1. 내비게이션의 의의와 목적

• 웹사이트를 이리저리 탐색하는 것은 귀찮을 수 있다.
• 그런 이동거리를 최소화하고 비슷한 목차들을 묶어서 보기 쉽게 하기 위해 우리는 내비게이션을 만든다.

2. 내비게이션의 종류

• 글로벌 내비게이션 (Global Navigation)
  • 웹 사이트의 모든 화면에서 고정적으로 볼 수 있다. 
  • 사이드바나 메뉴의 형태를 가지고 있다.
  • 상단에 버튼을 배치하거나 좌측에 슬라이드로 빼기도 한다. 모바일 버전에서는 하단에 배치하거나 햄버거 버튼을 이용하기도 한다.

• 유틸리티 내비게이션 (Utility Navigation)
  • 도움말이나 프린트, 설정과 같은 메뉴를 보여준다.
  • 아바타 아이콘 뒤에 숨겨놓거나 하는 등의 기능을 하며, 각각의 설정이 있을 수 있는 앱에 주로 사용된다.
• 연관 및 인라인 내비게이션 (Associative and Inline Navigation)
  • 콘텐츠를 직접적으로 유저가 이용하고 있을 때, 유저의 편의를 위해서 즉시 도움을 줄 수 있는 요소들을 보여준다.
  • 관련 있는 콘텐츠들을 묶는 역할도 한다.
  • 가끔은 유저가 이용할 때 걸리적거릴 경우가 있다. 잘 생각해서 만들어야 한다.
• 태그 (Tags)
  • 콘텐츠들을 비슷한 종류별로 묶는다.
  • 소규모 블로그 등에는 꼭 사용할 필요는 없지만 사이즈가 커지면 커질 수 록 유용하다.
  • 블로그가 커질 경우를 대비해서 처음부터 만드는 것 도 좋다. (나중에 태그들을 하나하나 달아 주려면 고통스러울 것이다)
  • 콘텐츠의 마지막 부분에 단어들을 나열하여 만들어 준다.
• 소셜 (Social)
  • 웹사이트와 소셜미디어를 결합할 수 있다.
  • 뉴스나 각종 수치에 대한 그래프 그리고 인기 검색어 등 다양한 수치들을 나타낼 수 있다.

3. 디자인 할 때 고려할 점

• 내비게이션의 디자인과 시각적 표현 분리하기
  • 순서와 몇개의 목록을 보여줄지 고민하자
  • 독특한 디자인 보다는 편하게 사용할 수 있는 친숙한 디자인이 올바르다.
• 인지 부담
  • 마찬가지. 독특함보다는 편안함이 우선이다.
  • 평범한 아이콘과 위치 만약 필요하다면 작은 텍스트를 이용할 수 도 있다.
• 이동거리의 최소화
  • 글로벌 내비게이션이라면 폭을 넓혀서 디자인하자
  • 자주 접근하는 항목들을 글로벌 내비게이션에 담자
  • 반복적인 행동을 계속 하지 않도록 하며 콘텍스트 전환이 없이 모든 작업을 한 페이지에서 한 번의 로딩으로 끝낼 수 있도록 단계를 묶어 설계한다.

4. 패턴

• 명확한 진입점 (Clear Entry Points)
  
  • 많은 기능을 넣는것 보다는 확실히 목적을 알 수 있도록 명확하게 디자인한다.
  • 진입점을 정확히 하고, 유저로 하여금 고민하지 않아도 되도록 만든다.
• 메뉴 페이지
  • 웹사이트의 모든 페이지 정보들을 한 화면에 담아서 어떤 기능을 하는 페이지를 쉽고 빠르게 찾을 수 있도록 한다.
  • 페이지가 많아 복잡한 웹에 어울리며, 다른 방해 요소가 아무것도 없어서 온전히 내비게이션에 유저들을 집중시킬 수 있다.
  • 하지만 유저들은 거부감이 조금 있다. 텍스트가 가득하고 복잡하기 때문이다. 그렇지만 각 요소별로 잘 정리해 놓고 그나마 가독성이 좋게 만들어서 그런 점들을 보안할 수 있다.
• 피라미드
  • 메인으로 모든 페이지와 연결될 수 있는 페이지를 하나 만들고, 뒤로가기와 함께 이용하여 각각의 페이지들을 연결하는 형태이다.
  • 상품의 소개나 사진이나 정보의 나열에 쓰일 수 있다.
  • 사용자는 이동하는데 클릭하는 횟수가 줄어들고 각 페이지의 연결성을 높일 수 있다.
  • 하지만, 새부적으로 나눠놓은 콘텐츠의 연결성이 부족하면 유저 이탈로 이어질 수 있다.
• 모달 패널 (Modal Panel)
  • 열렸다가 닫치는 작은 모달을 만들어 표시한다.
  • 유저의 확실한 집중을 받을 수 있다.
  • 모달이 열려 있을때는 다른 곳으로 이동할 수 없으므로 로그인과 같은 내용들을 넣기 좋고, 모달의 뒤편에 있을 진짜 웹 사이트의 내용들을 두고 다른 기능들을 처리하기에도 편리하다. (ex: 장바구니, 회원가입 이후 로그인 등)
• 딥 링크 (Deep Link)
  • 유저가 웹 사이트를 이용하던 상태를 저장하여 다른 기기나 다른 장소와 시간에 다시 접속하였을 때도 그 맥락을 이어서 사용할 수 있게 해 준다.
  • 만족스러운 UX를 제공할 수 있다. (ex: 유튜브나 넷플릭스의 이어 보기)
  • 콘텐츠 상의 사용자의 위치를 추적한 후에 URL에 넣는 방식을 사용할 수 있다.
  • 링크를 유저들 간에 서로 공유할 수 있는 기능을 넣을 수 도 있다.
• 탈출구 (Escape Hatch)
  • 현재 화면에서 한 번에 벗어날 수 있게 해 준다.
  • 404 페이지와 같은 막다른 곳에서 '홈으로'와 같이 탈출구를 만들 수 있다.
• 메가 메뉴 (Fat Menu)
  • 간단한 메뉴를 만들어 놓고, 그 옆에 모든 메뉴를 보여주는 메뉴를 하나 더 만든다.
  • 복잡한 웹사이트일 경우 자주 사용하는 것들을 모아 간단한 메뉴를 만들어 놓는다.
  • 숙련자들을 위해 모든 기능을 찾을 수 있는 메뉴가 또 있는 것이다.
  • 드롭다운 방식이나 여타 이용하는 메뉴처럼 디자인할 수 있다(물론 엄청 커진다)
• 로그인 툴 (Sign-In-Tools)
  • 우측 상단에 프로필 사진 등을 누르면 유저의 상태에 관련한 모든 작업을 할 수 있는 메뉴를 만든다.
  • 로그인, 회원가입, 정보 수정 등 다양한 기능을 넣을 수 있고, 로그인을 자주 이용하는 웹 사이트일 경우 더 유용하다.
  • 너무 크게 만들면 안 된다.
• 프로그레스 인디케이터 (Progress Indicator)
  • 페이지를 진행하면서 지금 유저가 어디 있는지를 알려주는 인디케이터를 만든다.
  • 단계가 있는(ex: 회원가입 등) 작업을 유저가 하고 있을 때 어디까지 진행되었는지, 얼마나 남았는지를 시각적으로 보여줄 수 있다.
  • 페이지의 구석이나 상단에 크지 않은 사이즈로 배치하는 것이 옳다.
• 브레드 크럼 (Breadcrumbs)
  • 큰 카테고리를 나눠두고 그 아래에 더 작은 카테고리를 나눠 놓는 것이다.
  • 상품 판매 사이트에 상품의 종류를 나누기 위해 잘 사용된다. (ex: 전자제품 -> 주방용품 -> 베이킹 용품)