UI 요소(2)

17. UX Writing Study│UI 요소(1) (이어서)

3. 내비게이션바Navigation Bar

콘텐츠 또는 페이지 간의 연결을 돕는 요소로 사용자가 자신의 목적지를 향해 순항할 수 있도록 돕는 항해지도에 비유할 수 있다.(*「스토리로 이해하는 UX디자인 프로세스」, 2015)

글로벌 내비게이션 바 Glober Navigation Bar: 어느 페이지에 있든 유저가 원하는 페이지로 이동할 수 있게 하는 길잡이 역할 * 웹 페이지에서는 대부분 상단에 위치함. But 모바일에서는 유저 환경에 따라 다름. UX에 따라 기능적으로도/용어도 자주 바뀔 수 있는 부분이기에 기초 맥락만 알고 있으면 된다고 한다. 

- 제품의 기초를 이루는 요소로 UI를 설계할 때 가장 중요한 부분

└ 주 메뉴로 빠르게 이동할 수 있는 링크 포함

- 유저가 앱의 특성을 한눈에 보고 파악할 수 있는 요소

└ 앱의 이탈률과 전환율에도 큰 영향을 주는 메뉴

- 유저의 니즈, 조직의 목표, 콘텐츠, 기술, 맥락 등의 정보를 기본으로 항목/방식 결정

▼

로컬 내비게이션 바 Local Navigation Bar: 글로벌 내비게이션을 누르면 나오는 메뉴 항목

- 글로벌/로컬 내비게이션은 상호보완적이어야 하고 동시에 *일관성이 중요

└ *일관성: UXW가 염두에 둘 부분. 메뉴명을 일관되게 표현

▼

컨텍스추얼 내비게이션 바 Contextual Navigation Bar·액션바Action bar: 앱을 사용하는 맥락상 필요한 경우, 유저의 필요에 따라 내비게이션 버튼이 등장하는 방식

★ 예시 이미지 캡션 정정합니다 ★

▼ 모바일 바텀Bottom 내비게이션 바

마이리얼트립 / 마켓컬리 바텀 내비게이션 바

▼ 웹 페이지 예시(책의 목차와 같다고 생각하자)

(왼쪽) 화면 상단 글로벌 내비게이션 바 (오른쪽) 매거진 항목 클릭 시 등장하는 로컬 내비게이션 바 클릭하면 해당 페이지로 이동

컨텍스추얼 내비게이션 바 예시, 필요할 때 등장하는 사이드 바(왼쪽)  아이콘을 롱 프레스 하면 등장하는 또 다른 아이콘(오른쪽)

*롱 프레스Long Press: 한 아이콘을 길게 누르는 동작, 해당 아이콘은 물론 다중 선택 모드 가능

*위 예시는 모바일 환경에 따라 달라질 수 있다

▼

< 내비게이션 관련 > 가볍게 참고하면 좋을 블로그&브런치

https://blog.naver.com/ju3954/222555436979

모바일 UI/UX 디자인 용어 및 패턴

https://brunch.co.kr/@dalgudot/98

03화 UI/UX 디자인 가이드_ 내비게이션 바

https://material.io/

Material Design

4. 온보딩Onboarding Screen + 스플래시Splash Screen

앱의 사용 가치와 필요를 어필하는 첫 화면 개념으로 앱을 처음 이용하는 유저들이 앱을 계속해서 사용할지 말지 당락을 짓는 UI 요소 중 하나다. Google Paly에서 원하는 앱 아이콘을 선택 → 다운로드 → 열기 → 스플래시 → 온보딩으로 이어지는 전 과정에서 '일관성'이 중요하다.

▼

온보딩Onboarding: '배에 탄다'라는 뜻의 이 용어는 원래 신규 직원이 조직에 잘 적응할 수 있도록 업무에 필요한 지식이나 기술 등을 안내하거나 교육하는 과정을 의미한다. 이를 모바일 앱으로 가져오면, 앱의 기능을 잘 습득할 수 있도록 도와주는 첫 화면요소라고 할 수 있다. 온보딩도 여러 기능으로 나뉜다.

- 앱에서 온보딩 스크린이 필요한 상황

① 사용 패턴이 익숙하지 않을 때  ex) 기능별 사용법 설명

    ㄴ 개인적으로 이 부분은 가볍게 스킵한다. 직접 부딪히며 익히는 스타일이기도 하지만, 

        첫 화면부터 너무 많은 정보가 눈에 들어오지 않는다. 다 기억할 재간도 없고...

        근데 최근엔 사용법이 직관적이어서 그런지 보기 드문 것 같다

② [맞춤화] 유저의 상황/환경에 맞게 조율할 때   ex) 일주일 운동 횟수는?

③ 본격적으로 앱을 시작하기 전에 사용자 정보가 필요할 때 ex) 원활한 이용을 위해 본인인증을 해주세요

▼

스플래시Splash: 1초에서 5초 정도 이어지는 로딩 화면으로 제품과 사용자 사이의 중요한 연결고리다. '첫인상'을 좋게 가져갈 수 있는 요소(이미지+텍스트)로 그다음 이어지는 화면에 대한 기대감을 불러 모은다.

① 이미지+텍스트

② 로고+텍스트

③ 애니메이션

④ only 카피

오일나우 앱 온보딩 예시_앱 사용 시 유저의 정보가 필요할 때, 정보를 알면 맞춤화가 가능하므로

스플래시

▼

< 온보딩&스플래시 관련 > 가볍게 참고하면 좋을 뉴스레터

https://maily.so/tipster/posts/34a501

�온보딩 화면, 어떻게 구성하면 좋을까?

https://maily.so/tipster/posts/58bbb3?utm_source=icunow&utm_medium=cpc&utm_campaign=icunow-splash

�스플래시, 어떻게 구성할까?

5. 모달Modal

사용자가 보고 있는 현재 화면 '위'에 뜨는 UI 요소... (백문이불여일견, 이미지로 이해하는 게 가장 빨라요)

▼

모달Modal: 현재 화면을 벗어나지 않은 채 화면 안에서 선택한 다른 항목을 보여주는 창. 한번 더 이해하기 쉽게 설명하자면 기존에 보던 창 위에 새로운 창을 연다는 개념으로 *기존 화면은 비활성화 상태가 된다.

기존의 창을 강제 종료한다면 모달도 함께 사라진다. 모달은 '나 홀로' 존재할 수 없는 창이다. 팝업과 비슷한 듯 닮아 헷갈리는 부분이다. *모달 디자인 기본 가이드

① 바텀시트Botton sheet: 화면 아래서 위로 나타나는 창

② 사이드시트Side Sheet: 화면 좌에서 우로/우에서 좌로 나타나는 창

뱅크샐러드/쏘카 예시_바텀시트(왼쪽), 사이드시트(중간), 정중앙에 등장한 시트

▼

< 모달Modal 관련 > 가볍게 참고하면 좋을 브런치

https://brunch.co.kr/@bcc5736f7b26444/1

팝업과 모달, 페이지 이동의 구분

---

17. UX Writing Study│UI 요소(1)에 이어서 두 번째 콘텐츠다. UI 관련해서는 공부해나갈 게 많다.

특히 UI요소는 지칭하는 단어가 무슨 뜻이지 알아야 말귀를 알아듣기 때문에 미리 알아두면 좋다고 생각한다. UX Writing이 쓰이는 곳의 시스템 기반을 알아두는 건 내가 어떤 장르의 글을 써야 하는지 아는 것과 같다. 칼럼을 써야 하는데 에세이를 쓰면 안 되는 것처럼. 이번 콘텐츠는 18. UX Writing Study│UI 요소(3)으로 이어질 예정이다.

한 가지 더 강조하고 싶은 게 있다. UI 요소를 글로만 읽고 이해하기보다는 직접 찾아봤으면 좋겠다. 브런치에 예시 이미지를 반영하기는 하지만, 공부가 '내 것'이 되려면 직접 찾아보는 게 유익하다. ^^ UXW의 쓰임새도 더 잘 이해할 수 있으니까.