[본캠프] d+7.

박예지·2025년 1월 31일

[UIUX] TIL 📑

목록 보기
18/100
post-thumbnail

설날 3일 놀다가 공부하려니 죽을 맛 🥵

📌 과제 2

디자인 원칙을 활용한 레퍼런스 분석

나쁜 사례 1 🙅‍♀️

(출처 : 캐치 테이블)

UX/UI 심리학 법칙 > 힉의 법칙

💡
의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례하여 늘어난다.

이 세장의 사진이 식당 목록에서 하나의 식당을 클릭했을 때 보여지는 전체 화면이다.

편의 시설, 리뷰, 사진, 메뉴 등과 같은 내용은 사용자의 작업에 영향을 미칠만한 내용들이다.
하지만 그 내용들을 홈 탭에 너무 늘어놓아 사용자가 받아들여야하는 내용의 양이 너무 많다.

안내 사항의 내용들을 숨길 수 있는 기능은 있지만 모두 펼쳐진 채로 있어 사용자는 정말 원하는 내용을 찾기 위해 계속 스크롤을 해야한다.

개선점

  • 안내 사항들을 접어놓고 사용자가 원하는 내용만 펼쳐서 볼 수 있도록 개선
  • 메뉴, 사진, 리뷰, 편의 시설 등 탭바에 이미 명시되어있는 내용들은 홈 탭에서 지운다.
  • 각각의 탭에서만 내용을 확인할 수 있도록 한다.
  • 탭바의 크기를 키운다.
  • 탭 이동 없이 한 화면에서 보이게 하고 싶다면 원하는 카테고리를 클릭했을 때 스크롤이

UX/UI 디자인 원칙 > 스케일

💡
상대적인 크기를 사용하여 구성의 중요도와 순위를 표시하는 것


캐치 테이블은 원하는 식당을 예약하기 위한 어플이다. 따라서 가장 중요한 작업은 예약이다.
하지만 예약 섹션의 크기가 다른 섹션들보다 작다.

개선점

  • 예약 섹션의 크기를 좀 더 키워 예약과 관련된 모든 정보들 (날짜·인원·시간 선택, 예약 오픈 일정, 예약 가능한 시간대 등) 이 한 눈에 들어오도록 한다.
  • 위의 사진처럼 일관성없게 작업을 수행하지 않고 예약하기 버튼을 클릭하면 전체 화면 크기의 창으로 넘어가서 작업을 수행할 수 있도록 한다.
  • 날짜, 인원수, 시간 등의 선택지들을 한 화면에 하나씩 배치하여 사용자가 작업이 쉽도록 느끼게한다.
  • 예약 완료까지의 모든 화면의 상단에 프로그래스 바를 위치시켜 진행 상황을 알 수 있도록 한다.
  • 예약이 가능할 시간이라 할지라도 잔여 좌석 등에 대한 정보를 명시한다.

좋은 사례 1 🙆‍♀️

(출처 : 캐치 테이블)

게슈탈트 심리학 > 근접성의 원리

💡
가까이 위치한 요소들끼리 관련이 있다고 느껴진다.

각 섹션마다 제목이 있고 관련 내용들이 위치해있다. 제목과 알맞는 요소들이 근접하여 위치하고 있어 정보가 한 눈에 들어온다.

UX/UI 심리학 법칙 > 밀러의 법칙

💡
정보를 하나의 덩어리로 만들어 이해하고 기억하는 것이 더 효과적이다.

앞서 들었던 나쁜 사례와 비교해봤을 때 사용자가 주요한 작업 (원격 줄서기) 을 수행하는데 필요한 내용들만 남겨놓아 사용자가 정보를 더 쉽게 받아들일 수 있다.

또한 그러한 내용들을 그룹화하여 배치시켰고 각 섹션의 내용들이 무엇인지 알 수 있도록 제목을 기입하여 명확성을 높였다.

부가적인 설명을 위한 요소들을 툴팁이나 더보기 버튼 등으로 표현하여 레이아웃을 해치거나 컨텐츠의 길이를 늘리지 않고 사용자의 편의에 따라 확인이 가능하도록 하였다.

주요 작업 수행

📐

디자인 원칙을 활용한 디자인 레퍼런스 분석은 아니지만
어쩌다보니 두개의 어플을 비교해보았기 때문에 몇자 적어보자면..

(📢 캐치 테이블 예약 화면은 위에서 첨부했으니 테이블링만첨부)

사용자가 원격 줄서기 버튼을 클릭했을 때, 대기 완료까지의 진행과정이다.
전체 화면 크기의 한 페이지에 하나의 작업만을 배치했다.
대기 신청을 완료했다면 내 계정의 카카오톡으로 알림톡이 오고 맨 마지막 사진처럼 내 대기 순서를 확인할 수 있는 알림창이 뜬다.

물론 내가 이 어플들을 통해 실제로 예약을 하고 가서 식사를 하지 않았기 때문에 나의 경험이 실사용자들의 경험과 완벽하게 일치한다고 말은 못 하지만 인터페이스 확인을 위해 잠깐의 절차를 진행해본 결과 테이블링이 좀 더 정돈된 UI/UX를 제공한다고 느껴졌다.

캐치 테이블에서 예약을 했을 때 한 페이지에서 보여주는 화면 요소들 (날짜, 인원, 시간 선택)이 많아서 그런지 아니면 전체 화면이 아닌 화면에서 과정을 진행해서 그런지 모르겠지만 좀 더 급박하게 진행을 한 느낌이 든다.

또한 테이블링은 현재 상황 (몇 팀 대기 중) 에 대한 정보를 제공해서 사용자들의 선택에 도움이 될 수 있을 것이라고 생각한다.
(대기 팀이 너무 많으면 다른 식당을 간다던지 등)

하지만 캐치 테이블은 총 몇 건의 예약을 받을 수 있고 현재 얼마나 예약이 되어있는지 알 수 없어 흑백 요리사 출연 셰프의 식당처럼 경쟁이 치열할 경우 사용자에게 부정적인 인상을 줄 수 있을 것 같다.
(아마도 식당 내부 사정이라 공개가 불가능하겠지)

profile
Life is pain au chocolat 🍞

0개의 댓글