[TIL] 3주차_수요일

김민경·2025년 2월 6일

Today I learned

목록 보기
7/8
post-thumbnail

​디자인 카타

두 가지 UI를 보고 더 낫다고 판단한 UI를 선택 후 이유와 뒷받침할 근거를 찾는 과정.

예약 시 정보 입력 각 방식의 장점은 무엇일까요?

A 선택
이유:

  • 단계별로 진행이 되고 있으며, 상단에 1/2단계로 현재 진행 위치를 알려주어 사용자가 상황을 파악하기 쉽다.

  • 컬러감, 폰트 강약 효과로 사용자가 조금더 진행하는데에 있어 집중하게 되고 이탈율이 낮을 것 으로 판단.

  • 사용자가 다음에 뭘 해야하는지 헤매지 않고 진행할 수 있다.

  • 단계별로 진행이 되기 때문에 한 페이지당 정해진 양의 정보만 입력하면 되어서 사용자가 이용하는데 있어 더 편리할 것 으로 판단.

B 선택하지 않은 이유

  • 한 페이지에 입력해야할 정보가 너무 많기에 사용자는 집중력이 흐려지거나 이탈하게 될 가능성이 높다
  • 정보를 한 눈에 볼 수 있지만 스크롤 양에 따라 단점이 부각됨.







2 개인과제-심화선택과제

프로토타입 제작하기



요구사항

  • 필수 과제 1의 사용자, 문제, 문제를 해결할 아이디어가 분명하게 정의.
  • 필수 과제 2의 레퍼런스 분석을 통해 문제를 해결할 아이디어의 근거를 탄탄히.


BBQ 자사 앱 개선 프로토타입 제작

1. 메인화면

<기존>



  • 프라이머리 컬러로 보이는 레드 컬러를 전체적으로 사용하여 대비감이 없어 시각적으로 화면의 구성요소가 한 눈에 들어오지 않는다.

  • 상단에 BBQ 주문, BBQ 몰 이라는 슬라이더 형식 아이콘이 있지만 화면안에 BBQ MALL바로 가기 버튼이 있는 것은 사용자에게 혼란을 줄 수 있다 생각하였다.

  • ‘새로 나왔어요’ / ‘이거 어때요?’ 라는 문구와 함께 슬라이드 형식으로 메뉴가 보인다.

  • 하지만 사용자가 주문을 하려고 앱을 켰을때 홈 화면에 이미 배달, 포장 버튼이 있기 때문에 굳이 스크롤을 하여 내려 볼 것 같지 않다.

  • ‘추천 메뉴’ 기능을 가진 요소들은 아주 적절한 구간에 배치가 잘 되어있어야 기능을 발휘한다고 생각하는데 BBQ에서는 홈 화면 하단에 추천 기능을 넣은 것이 아쉽다.

  • 텐퍼센트 커피 처럼 홈화면을 간단하게 만들어 줄이고 굳이 스크롤 하지 않아도 홈화면에 들어가자마자 추천메뉴가 뜨거나 상품 상세페이지에서 곁들이면 좋은 추천메뉴로 나오는 것이 나앗을 것 같다.



<개선 프로토타입>




  • 배경을 화이트 컬러로 바꾸고 레드 컬러는 프라이머리 컬러로 설정 후 아이콘, 버튼에만 사용하여 대비감 형성
  • 기존의 스크롤을 끝까지 내려야 보이던 추천메뉴들은 메인화면 중앙에 위치하여 사용자가 바로 볼 수 있도록 수정
  • 메인화면에서는 메뉴를 고르거나 할 수 없기 때문에 상단 우측에 있던 장바구니 아이콘 대신 알림 아이콘으로 변경
  • 네비게이션 바에 있던 메뉴 기능은 상품 메뉴가 아닌 드로어가 열리면서 기능 카테고리와 매뉴얼이 나왔는데 사용자에게 혼란을 줄 수 있을것이라 판단하여 드로어 아이콘과 더보기로 변경






  1. 매장 리스트 (제작중)
  • 원래는 가장 문제가 많았던 메인화면만 고치려고 했으나 사용자 공감하기 단꼐에서 가장 개선해야할 점들이 많았던 매장 리스트 까지 제작하였다.
  • 몇가지 수정 사항이 있어서 아직 제작 중이지만 내일 완성하면 TIL 작성 예정













회고

  • 연휴 덕분에 오랜만에 피그마를 만지게 되어서 많이 헤맸다
  • 과제 끝나고 나서부터는 1일 1클론 진행할 것.
  • 스크롤 적용하는 것이 너무나 성가시다 -> 많이 연습해 둘 것.
  • 피그마가 아직 숙련되지 않아서 제작 속도가 빠르지 않다
  • 빠르게 제작 가능할 때 까지 클론 디자인 진행할 것
profile
UXUI 디자이너 취준생

2개의 댓글

확인완료~ 귯🩷

답글 달기

프로토 타입 완전 기존에 비해서 깔끔하고 좋은것 같습니다! 오늘도 수고 많으셨어요!

답글 달기