수요일 - 목표
📍UI와 UX 구분하기
📍튜터님 피드백 수정
📍사용자 문제 재정의
📍As is & To be
👀 뒤집어엎기
어제 들은 피드백을 토대로 플로우 개선하고 있었는데 갑자기 이런 의문이 들었다. 이거..UI 개선이 아니라 UX 개선 같은데..? 아리까리한 상태로 진행을 하기보단 튜터님께 피드백을 받는게 맞는 거 같다는 팀원들의 의견에 따라 바로 튜터님께 찾아갔다. 그 결과는.. 바로바로 뒤집어 엎기^^ 감사합니다
▶️UI와 UX의 차이
결론은 우리가 개선하고자 했던 방향은 UX개선 관점이 맞았다. 이번 과제의 주제는 UI의 개선이기때문에 하던 작업을 중단하고 우리팀은 긴급 회의에 들어갔다. 전반적인 플로우를 수정하려던 것에서 딱 재고관리 부분만 간결하게 개선하는 것으로.. 해야하는 작업이 줄은거니까 좋은걸지도.. 점심시간에는 UX와 UI 개념을 찾아보았다.
https://ko.wix.com/blog/post/what-is-ux-design
UX/UI 디자인이란? 차이점과 사례를 한눈에 살펴보기
시작하기: 웹사이트 제작 → | 도메인 등록하기 →보통의 일상에서 우리는 아침에 마시는 커피용 머그잔부터 즐겨 찾는 모바일 애플리케이션 및 웹사이트 디자인에 이르기까지 디지털 및 물리
ko.wix.com
UX는 User Experience의 약자로 사용자가 제품이나 서비스에 대해 전체적으로 느끼는 사용자 경험을 의미한다. UX 디자인이란 제품을 신중하게 설계하여 사용자의 경험을 향상시키는 방식. UX 디자인은 중요성이 매우 부각되고 있음에도 불구하고 우리 일상에 너무 자연스럽게 스며든 나머지 일반 대중으로부터 잘못 이해되고 있다고 한다. UX는 ‘인간에 대한 우선적’ 접근 방식이 강조되는 디자인 분야이며, 사용자가 특정 제품과 처음부터 마지막까지 상호 작용할 수 있도록 지원한다.
UI는 User Interface의 약자로 사용자 인터페이스를 의미. 쉽게 말해서 사용자가 제품 혹은 서비스와 시각적으로 마주하는 디자인을 뜻한다. ex) 버튼,레이아웃 등등 수정
▶️사용자 문제 재정의
어제 튜터님이 주신 미션! 1~4단계는 정말 정리를 잘했다고 해주셨다. 그런데 우리가 플로우개선에서 방향을 틀면서 애매해진 사용자 문제 정의를 더 명확하게 하고 진행해보라는 말씀을 주셨다. 그렇게 하면 이것저것 건들이던 것에서 문제점도 명확해지고 그에 따라 개선점도 뚜렷하게 보일 것이라고.
재고찾기 페이지 UI 문제점!< 이라고 명확하게 정하니까 딱 2가지의 문제점을 파악할 수 있었다. 바로 원하는 상품의 재고를 검색했을 때 나오는 매장 리스트의 비효율성과 매장 지도 접근의 어려움이었다. 재고가 없는 매장은 사실상 리스트에 없어도 되는데 단순하게 거리순으로만 나열되어있다. 이러한 부분은 사용자가 재고 정보를 찾는데에 있어서 불필요한 정보와 번거로움을 가져온다. 또한 지도에서는 현재 위치기반으로만 노출되어서 사용자의 생활 패턴에 있는 타지역 매장의 재고를 확인하기 위해선 지도를 줌인아웃하고 하나하나 옮겨다녀댜하는 불편함도 있다.
찾았던 문제점에 대해서 부족한 VOC 근거를 더 보충해서 정리. 아 간결하다 간결해
타사 재고검색 비교는 전체적인 플로우를 비교했었기 때문에 더 깊고 디테일하게 분석하기위해 재고화면 자체만 뜯어보았다. 그리고 장점을 추려서 벤치마킹 하기로!!
▶️As is vs To be
사용자 문제정의와 타사 비교분석을 토대로 As is/To be을 와이어프레임으로 간략하게 그려보았다. 즐겨찾기를 바로 할 수 있는 버튼을 추가하고(이것은 사실 UX이기도하다) 매장 리스트는 재고가 없는 매장은 밑으로 내렸다. 이것으로 인한 기대효과로는 불필요한 정보를 확인하지 않고 재고를 확인할 수 있는 시간이 단축된다는 것이다.
두번째 개선은 생각보다 진짜 시간이 오래걸렸다. 체감상 하루종일 고민한 느낌..😵💫 서로 VOC를 이해한게 달라서 의견을 많이 주고 받느라고 더 오래걸린것도 있다..ㅎ 일단 보여지는 지도의 영역이 좁다는 VOC에 따라서 지도 영역을 확 넓혔다. 제품 이름은 상단에 고정시켜버리고 처음에 보이는 바텀시트의 컨텐츠 영역은 확 줄였다. 그리고 타사를 벤치 마킹해서 지도에 표시되는 핀의 컬러를 다르게해서 즐겨찾기 매장과 일반 매장을 구분해주었다.
https://brunch.co.kr/@userhabit/16
[번역] 엄지를 고려해 디자인하기
Thumb Zone에 대해 알아봅시다! | 데이터와 분석, 디자인을 키워드로 하는 좋은 글을 찾아 번역해서 소개하고 있습니다. 여섯 번째 소개글은 소개팅 앱 Tinder의 리드 디자이너이자 프로젝트 매니저
brunch.co.kr
제품 이름을 상단으로 올리면서 이 근거자료는 어떤걸로 하지 회의를 하던 중 팀원 분이 엄지 사용 영역에 관해서 자료를 갖고 오셔서 다들 참고하기로 했다. 비교군이 옛날 기종이긴하지만 확실히 상단보다는 하단이 주요 사용 영역인걸 확인할 수 있다.
💭
내일은 상단 제대로 페이지를 만들면서 디자인 수정에 대한 근거도 보충해야겠다. 발표자료는 정리된게 많아서 금방 끝나지 않을까,,,? 아자자 끝이 보인다