TIL[UIUX디자인 TIL+26]-CH.4 UI 프로젝트

📍 오늘의 계획 오전 9:00~9:30 : 팀 오전 스크럼 9:30~10:00 : 팀회의 10:00~12:00 : 팀프로젝트 진행-3단계 추가진행 12:00~13:00 : 점심시간 오후 13:00~18:00 :프로젝트진행 18:00~19:00 : 저녁시간 19:00~20:00 : 프로젝트진행 20:00~20:10 : 오후스크럼 20:00~21:00 - TIL 작성 /댓글작성하기

프로젝트 3단계- 공통점,차이점,반복패턴 조사 프로젝트 3단계 - 넘어가는 다른 화면과 그 패턴 추가조사 팀회의 후 프로젝트 진행 레퍼런스 찾아보기 TIL 작성하기

오늘도 프로젝트진행을 목표로 계획을 세웠다!!

---

📍 프로젝트 3단계진행

 

코레일의 홈화면과 하단 내비게이션을 중점으로 UI를 분석했고 비교 경쟁사로는 카카오T를 선정했다.

코레일 톡 홈화면과 하단 내비게이션으로 이동 가능한 페이지를 살펴보았을때 앱에서 의도한 UI디자인을 분석했고 해당 UI로인한 단점을 분석했다.

코레일 톡은 전체적으로 간결한 리스트형 UI를 사용했는데 너무 간결하고 사용자가 혜택, 이벤트를 접하기에는 어렵다고 판단했다.(자세한내용은 피그마에 적음,,,)

다양한 UI디자인 단점 중 눈에 띈 것은 시각적 위계가 전혀 지켜지지않는다는 것이었다.

또한 버튼이 각 페이지마다 곡률, 색상 등 모두 달라서 통일성이 떨어진다는 점이었다.

📍 코레일 톡에서 발견한 문제점(일부 옮겨본다..)

• 전체적인 화면 규칙이 대부분 4배수인데 홀수 간격도 존재함
• 단순한 아이콘사용으로 직관적일 수 있지만 시각적 즐거움 X
• 글자크기, 굵기, 컬러 시각적 위계가 없어보임
• 하단 내비게이션에서 ‘지역사랑여행'의 역할..? 왜 하단내비게이션에 있어야하는지 모르겠음(역할 불분명함)
• 홈화면에 이벤트 배너가 없어 혜택을 쉽게 접할 수 없음
• 단조로운 컬러와 위계가 없는 컬러조합(보색을 사용하거나 대비를 줄 수 있는 컬러조합이 필요해보임)
• 비로그인상태에서는 헤더에 아이콘구성이 바뀜 - 챗봇 버튼 사라짐
• 특가상품, 정기승차권, N카드 구간을 정확히 구분할 수 없음- 리스트형 UI로만 이루어져 구분 어려움/ chip이동으로 판단
  
• 텍스트 위계가 없어보임- 핵심정보, 설명 비슷한 택스트크기와 컬러사용
  
• 각 구간별 명확한 구분 필요함
  
• 각 구간을 시각적으로 명확하게 인식할 요소가 없음 (다 똑같은 UI 디자인 / 통일감을 넘어 너무 단조로움 오히려 시각적으로 헷깔림)
  
• 혜택/ 정기권 하단내비게이션에서 강조하려고 다른 컬러를 넣은 것 같은데..효과없음 오히려 방해되는 UI디자인
  
• 홈화면이랑 버튼색상이 미묘하게 다름... 왜다르지..? 저정도 색깔차이면?/ 버튼의 곡률도 다름-> 카드의 곡률도 다름
  
• 추천 이벤트를 메인 홈 화면에 없고 혜택/정기권에도 없고 지역사랑여행에서 확인할 수 있음
  -> 지역사랑여행을 사용자가 할 수 있도록 유도할려면 지역사랑여행 이벤트를 홈화면에 배치해야 적합
  
• 택스트의 시각적 위계가 없음
  
• 열차의 종류를 슬라이드가능하다는 사실을 사용자가 인지하기 쉽지 않음-> 폐쇄성의 원리를 적용하면 좋을듯
  
• 자유여행패스관련 이용안내를 툴팁을 이용해서 사용자가 정보를 쉽게 인식하지 못함
  
• 툴팁을 누르면 이용안내가 나오는데 가독성이 너무 떨어짐(시각적 위계가 없고 다 동일한 크기, 컬러, 굵기이고 글간의 간격이 너무 가까워 가독성이 떨어짐)
  
• 지역별사랑여행을 사용자들이 많이 보도록 유도해야하는데 사용자가 접근하까지의 단계가 복잡하고 여행 패키지 디자인이......사용자유도 전혀 안됨
  
• 사용자에게 다양한 추천 프로그램 경로가 복잡하고 직관적인 설명이 부족함
  
• 사용자 맞춤 추천은 없고 모든 사용자에게 똑같은 추천을 함
• 버튼에 곡률이나 다른 디자인이 없어 버튼이라고 인식하지 못할 수 있음-> 곡률이나 다른 UI디자인으로 버튼을 버튼답게!! 디자인
  
• 버튼에 컬러나 텍스트말고는 다른 규칙이 없어보임 페이지마다 버튼의 형태가 다름

 

여러화면을 분석하고 그냥 모은거다보니...! 정리가 잘 되어있지는 않다.....!

 

반면 카카오T는 코레일 톡에서 부족했던 부분이 훨씬 적었다.

<코레일톡과 카카오 T 공통점> * 핵심 기능을 최우선 배치함-> 코레일 톡 : 열차 예매와 승차권 조회가 메인 / 카카오 T : 택시호출이 메인 * 하단 네비게이션바 활용-> 홈화면에서 다른기능으로 쉽게 이동할 수 있도록 하고 아이콘과 텍스트를 조합하여 직관적이 조작기능 * 사용자가 현재 필요한 정보를 빠르게 제공 * 기차 예매관련 페이지에서는 빠른검색과 직관적인 예약방식을 최우선으로 함 <코레일톡과 카카오 T차이점> * 코레일 톡은 미리 열차를 예매하고 확인하는 ‘정보탐색형' UI / 카카오T는 한번의 터치로 빠르게 이동하는 ‘즉시 실행형' UI * 코레일 톡은 홈화면에 철도이용의 핵심기능만 배치함 / 카카오 T는 철도이용이외에도 택시,바이크,대리,항공 등 다양한 선택지를 제공할 뿐 아니라 다양한 이벤트 배너와 소식을 전달해줌 * 코레일 톡은 단순한 컬러변화와 아이콘만 사용했고 카카오T는 메인컬러를 제외한 다양한 컬러와 픽토그램을 사용하여 시각적인 즐거움 제공 * 코레일 톡 주로 리스트형 UI 사용(예매목록, 열차시간) -> 정보중심, 규칙적인 데이터를 다룸 / 카카오 T는 주로 카드형 UI를 사용(다양한 서비스 선택)->사용자가 빠르게 시각적으로 정보를 인식하고 선택하도록 유도, 시각적인강조와 직관적인 선택 * 카카오는 전체화면 흰배경에서 카드형 UI배경을 다른 색으로 했는데 코레일은 카드형 UI를 stroke로만 디자인함 <해당 업계에서 주로 쓰이는 UI패턴> * 최상단에 출발-도착 입력필드를 배치함-> 빠른 검색과 예약을 유도 * 주요 서비스 배너는 카드형 UI로 제공 코레일톡은 기차예매중심이고 카카오T는 멀티 교통 플랫폼으로 설계되어있지만 두앱 모두 사용자 경험을 최적화하기 위해 유사한 UI패턴을 채택 <코레일 톡을 카카오T와 비교및 개선할 점> * 카카오는 화면전환은 슬라이드로 화면을 전환하여 더욱 자연스럽고 직관적인 화면전환이 가능한데 코레일 톡은 바로 페이지 이동이 되어 카카오의 화면 전환 방식이 더욱 자연스러움 * 코레일톡 홈 화면은 핵심기능만 배치한 반면 카카오는 홈화면에 메인배너,서브배너외에 다양한 이벤트 소식과 실시간 핫플레이스 순위 등 다양한 정보를 제공함-> 코레일톡 홈화면에 복잡한 경로없이 바로 다양한 이벤트 혜택을 볼 수 있도록 이벤트 배너 배치 * 리스트UI가 많은 정보를 전달하기에 효과적일 수 있지만 카카오처럼 카드형 UI를 활용하여 많은 정보를 한눈에 인식할 수 있도록 하는 것이 효과적임 * 카카오는 핵심내용이나 강조할 부분을 하이라이트나 텍스트 굵기 등을 통해 시각적 위계를 나타나게 했지만 코레일은 시각적 위계가 부족함 * 플로팅액션버튼을 이용하여 앱사용시 필요한 요소를 배치해도 좋을 것 같음 * 코레일 톡에서 사용자가 꼭 이용할 수 있게 유도할 수 있도록 해당 메뉴로 이동하는 버튼에 간단한 설명창(말풍선,팝업?)을 이용하면 좋을 것 같음(카카오T에는 있음) * 카카오는 블랙+화이트+옐로 브랜드컬러를 효과적으로 활용하고 그밖에도 각 페이지에 맞는 컬러를 다양하게 사용함 하지만 코레일은 블루+화이트 브랜드 컬러 단 두개만 이용함 * 카카오톡은 4배수 원칙이 잘 적용되어있음 / 코레일 톡은 전체적으로 4배수 원칙이 적용되어있지만 아닌부분도있어 전체적으로 규칙적이지 않다고 볼 수 있음.. * 코레일 톡의 규칙성있는 버튼 디자인을 하면 좋을 것 같음!(더욱 빠르게 버튼을 인식 할 수 있도록) * 카드형 UI를 stroke이 아닌 배경색을 이용하면 효과적일 것 같음

각 화면마다 자세한 분석을 했는데 두 앱의 비교는 크게 이렇게 정리했다!

---

이후 팀원들이 분석한 화면들을 서로 공유하며 의견을 모으고 질문도하는 회의시간을 가졌다...!

결론! 타켓은 잘 잡았지만 앱 UI분석 내용이 너무 광범위함! 각자 문제점을 찾은 것도 좋지만 이 문제를 다 해결할 수 없기에 VOC분석을 토대로 범위를 좁혀야할 필요가 있음

그리고 분석을 UX에 중점을 둔 부분도 있는데 UI에 집중해야함!!!

 

내일은 팀원분들과 회의를 하고 다양한 정보를 얻기위해 설문조사를 진행하기로 했다!!

그리고 문제의 범위를 좁히기위해 voc를 더 조사해보기로 했다~~~~

 

오늘 조사한 내용이 필요가 없을 수도 있지만,,,분석능력을 향상시킬 수 있었다,,,<!!!!