월 14,960원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
UX 사례 - 채용플랫폼 (원티드/ 잡플래닛)
안녕하세요, 멘토님. UX 디자인 원리 관련한 과제를 부족하지만 올려봅니다. 저는 요즘에 자주 사용하는 채용플랫폼 원티드와 잡플래닛의 UX 를 비교하며 개인적인 견해를 작성해보았습니다.원티드(홈 화면 / 채용공고 화면 / 채용공고 상세화면)원티드는 홈화면에 인사이트와 교육 중심의 콘텐츠를 중심으로 배치하였고 채용화면은 두번째화면에 위치시킴으로 원티드가 교육 및 콘텐츠에 조금 더 주력하는 모습을 볼 수 있습니다. 개인적으로 잘되었다고 생각하는 점은,일관성 원리에 맞게 3~4개 정도 레이아웃을 유형화하여일관성도 지키고 UX의 지루함을 탈피했다는 점입니다. 또한 홈 화면과 채용화면의 상단 배너도 일관성있게 배치하여 유저에게 익숙함을 더했습니다. 하지만 아쉬운점은,원티드에 들어오는 유저들은 대부분 채용공고를 조회하고 지원할 목적으로 들어올텐데 콘텐츠 및 인사이트가 홈화면에 있는 것이 아쉬웠습니다.또한 검색 버튼을 누르게 되면 검색창으로 바로 넘어가지 않고 "북마크한 채용공고" 를 보여주는 화면을 거쳐가는것이 행동 유도성의 원리에 조금은 맞지않는 것처럼 보였습니다. 잡플래닛 (채용화면 / 뉴스화면/ 채용공고 상세화면)잡플래닛은 원티드와는 다르게 기업뉴스를 콘텐츠로 제공하고 있었으며 채용공고를 가장 첫번째 화면에 두었습니다.개인적으로 잘되었다고 생각한 점은,채용공고를 첫화면에 노출시킴으로써, 유저들이 잡플래닛에 들어와 채용공고를 보고 지원하고자하는 니즈를 아주 잘 충족시킨 화면구성이라고 생각됩니다. 또한 본인이 관심있는 직종을 가장 상단에 위치시켜 어떤 직종의 채용공고를 보고있는지 볼수 있는 점도 좋았습니다.그리고 개인 프로필화면을 하단의 플로팅처리하여 언제든지 개인 프로필로 이동하여 이력서를 수정할 수 있다는 점, 이력서를 완성도있게 작성할 수 있다는 점이 좋았습니다. 아쉬운 점은,원티드에서 제공하는 ai 추천이나 테마별 추천항목이 없기때문에 채용공고를 스크롤하다보면 지루한 느낌이 약간 들었습니다. 개인적으로 두 플랫폼을 사용해보면서 둘다 아쉬웠던점은, 채용공고를 찾아보는 신입 혹은 이직자입장에서 채용공고별 요구하는 경력기간들이 있는데 그 기간들이 1depth에서 나타나지않고 2depth에서만 나타나는 점이 너무 아쉬웠습니다. 두 플랫폼 모두 보상금/ 지원금이 비스니스 쪽과 연계되어있기 때문에 레이아웃내에 한정된 정보만 제공하기 위해 경력기간을 2depth로 내렸다는 생각도 듭니다.
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
안녕하세요 에릭님 !! 공부한 강의 내용 정리하고 공부 한 내용을 제 개인 블로그에 올려도 괜찮을까요??
안녕하세요!! 웹디 공부를 이번에 시작했습니다 !! 찾아 보다가 블로그에 공부한 것들을 정리해서 올리면 나중에 면접을 볼 때 도움이 된다고 들었습니다 ㅜㅜ제가 에릭님 강의 듣고 너무 좋아서 커리큘럼 대로 구매해서 보고 있습니다,, 강의 공부가 끝나면 정리한 내용들을 블로그에 올려도 괜찮을까요..?! 안된다면 올리지 않겠습니다 죄송합니다 ㅠㅠ
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
UI 디자인 원리 적용된 좋은 사례, 나쁜 사례
좋은 사례뱅크샐러드뱅크 샐러드 어플을 최근 들어 다시 쓰고 있습니다. 기존 은행 어플과 달리 정말 직관적인 UI를 많이 느끼고 있는데요.그 중에서 휴리스틱 평가 상태 안내가 적용된 걸로 생각되는 예입니다. 동의 사항이 나올때 아래 버튼이 '아래로 스크롤' 통해서 제가 더 읽어야 하는 것이 있다는 것을 말해주고 끝까지 읽으면 그 버튼 내용이 바뀌면서 '내 데이터 조회하기'로 바뀌어 다 읽고 그 다음으로 진행됨을 나타내는 CTA가 반영되어 이해하기가 수월했습니다나쁜 사례KB Star Banking많은 정보의 양을 너무 작은 텍스트, 그리고 그 글이 스크롤과 더불어서 좌,우로 읽어야 할 것도 있습니다. 뭔가 읽고 싶어도 읽고 쉽지 않게 만듭니다. 진행사항도 없고 제가 하는 행동이 하나도 UI요소로 반영이 안되어 더이상 여기선 '전체 동의' 버튼 누르고 빠르게 나가고만 싶었습니다. 뭔가 사용자로 하여금 읽게끔 배려해주는 것이 전혀 없다는 것을 느꼈습니다
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
좋은 UX와 안좋은 UX사례 - 과제
여러 디자인 원리를 말씀주셨는데 '정보 설계'와 관련하여 정부 사이트를 조사하였습니다.정부 사이트는 특성상 정말 많은 서비스들을 제공하고 있는데요. 그런만큼 정보 설계에 있어서 중요하다고 생각합니다. 여러 서비스 카테고리 중에 '신청' 페이지를 비교해보았습니다.안좋은 UX 사례 (홈택스)연말마다 홈택스에서 저와 관련된 '신청'을 찾아보려고 하지만 정말 쉽지 않습니다. 많은 정보들이 저한테 한번에 들어왔고 그것에 압도되어 더이상 저 정보 사이에서 제가 찾는 것을 쉽게 포기하곤 합니다. 그 후에 결국 항상 검색으로 향했습니다. 정보가 대분류부터 소분류까지 좀더 나뉘어져 있다면 쉽게 포기하진 않았을 것 같습니다.안좋은 UX 사례 (정부24)정부24에선 그나마 쉽게 포기하지 않을 수 있는건 저에 맞는 정보를 좀더 쉽게 찾을 수 있도록 '검색'을 제공해줍니다. 분류를 통해 대분류부터 소분류까지, 기관도 기관분류부터 제공기관까지 선택할 수을 통해 필요한 신청 서비스를 접근하는데 도움이 되며 많은 정보 속에서 하나하나 찾아야 하는 수고를 덜 수 있습니다
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
문서화
린 스타트업에서 빠른 가설 검증을 위해 문서화의 무게는 좀 덜 둔다고 강의를 들었습니다.하지만 추후 유지보수라던가, 인수인계를 위해 문서는 어쩔 수 없이 필요에 따라 만들 수 밖에 없을텐데요. 린 스타트업 조직에서 빠르게 문서화를 하는 도구라던가, 내용에 있어서 꼭 들어가야 할 템플릿 같은 노하우가 있을까요?
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
린 조직에서의 구성원 수
안녕하세요! 린 조직에 대해 흥미롭게 들었습니다린조직 내에 프로덕 매니저, 프로덕 디자이너, 엔지니어가 각각 몇명 정도 있나요?개인적인 생각으론 구성원들이 적게 구성될 거라고 생각했습니다. 혹시 대규모 기능 추가나 전체적인 개편 작업 같이 많은 리소스들이 하나의 목표를 바라보는 작업들이 계획된다면 린 조직 내에선 보통 어떻게 대응하나요?
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
린스타트업 주기
워터폴 모델과 달리 린스타트업은 출시 주기를 확 댕긴다고 하셨는데요.혹시 보통 린스타트업의 주기는 최초 제품 출시랑 그 후 개선 나뉘었을 때 어떻게 되나요?워터폴 주기와 많이 차이가 나나요?
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
UI 케이스 스터디 (29cm, 배달의민족)
유사성과 근접성, CTA를 기준으로 UI사례를 찾아보았습니다. ------------------------------------ 29cm 29cm는 의류와 lifestlye아이템을 판매하고 있습니다. 유사성과 근접성에 따라 상단 이미지와 하단에 연관 상품을 바로 붙여서 보여주고 있고 실시간 베스트와 같이 다른 큐레이션 영역은 간격을 줘서 다른 영역이라는것을 쉽게 인지할 수 있게 만든것 같습니다. 한가지, 상품 우측에 찜하기버튼이 있는데 이것을 바로 장바구니 추가 버튼으로 만들지 않고 찜하기로 만든 이유가 있을지 궁금하긴하네요 상품영역에서 보면 쿠폰받기, 구매하기와같이 주요 clickable한 버튼을 강조해 CTA가능한 영역안에서도 위계를 표현한 좋은 케이스인것 같습니다. 배달의 민족 배달의민족>배달을 누르면 중간영역에 필터부분이 있는데, 기본순>과 최소주문금액> 기타필터(포장/방문, 예약가능) 사이에 쿠폰과 1인분이 있습니다. 쿠폰은 할인혜택영역이고 나머지는 조건값을 필터하는것이니 기본순>, 최소주문금액>, 기타필터와 같이 유사한 기능을 한 그룹으로 묶어보여주면 더 좋은 UI로 보이지 않을까 싶습니다. 쿠폰은 토글버튼으로 표현해도 좋지 않을까 싶은데, 필터값을 걸고난뒤 나오는 상품리스트중에서 쿠폰이 적용되는 음식점이 있는지 확인하고싶은 니즈도 있을것 같습니다.
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
강의내용 관련해서 질문드립니다.
안녕하세요 에릭님, 강의 잘 듣고있습니다! :) 혹시 내용중에 워크샵 진행능력에 대해서도 말씀주셨는데 팀장이 아니더라도 팀 전체 회의를 주관한다거나, 리딩한 경험이 있으면 해당 부분도 어필을 할 수 있다는것으로 이해했는데요 이런 케이스들은 포트폴리오로 나타내기가 어려울수도 있을것 같은데, 인터뷰때 녹여내서 표현하는것인가요? 어떤 능력이나 업무경험이 있다고 하여도 그것을 최종 연봉협상하는 과정에서(보통 한국은 최종면접후 연봉협상을 하거나, 연봉테이블에 맞게 제안이 오는것 같아요) 어필했기때문에 연봉상승과 연결된것인지 아니면 해당 능력이 있기때문에 애초에 지원자격부터 필터가 되어서, 서류합격/면접과 같은 초반 단계를 뚫을수(?)있었기 때문에 그렇게 말씀주시는 부분인지 궁금합니다^^
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
과제 - 마이리얼트립, 여기어때
안녕하세요 멘토님, 일관성과 행동유도성의 원칙을 기준으로 살펴본 앱사례입니다. 마이리얼트립Good상단영역부터 하단까지 모두 가로형태로 롤링되는 레이아웃을 가지고 있어, 일관되고 편안한 ux를 제공하고 있다고 보여집니다.상단영역에 "격리없는 여행지>", "더보기>",최상단 배너에 "자세히"라는 문구로 click을 유도하고 있는 부분, shot-cut icon이 다소 많은데, 더보기로 하위 항목은 기호에 따라 접거나 펼칠수 있는게 상단 공간을 우선순위에 따라 효율적으로 배치한것처럼 보여 좋은 케이스라고 생각합니다.또한 CTA방향도 아래로 표기한것도 고객이 화면 움직임을 예측할 수 있어 좋은 디자인이라고 생각됩니다. 하지만 펼친뒤에 다시 접을수있는 기능이 없는건 살짝 아쉬운 부분인것같아요! 마이리얼트립은 원하는 여행상품이나 호텔, 항공 등을 검색하기위한 서비스로, 가장 상단에 도시나 상품 검색영역이 크게 자리를 잡아, 검색행동을 유도하고 검색 행위를 편하게 할 수 있도록 디자인된것 같습니다. Bad반면, CTA를 배치한것은 행동을 유도해 좋은 케이스라고 보여지지만, ">"만 표기된 경우, "자세히"라고 표기된 경우, "더보기>"로 표기된 경우와 같이 표현이 다양해 이 부분에서는 일관성이 부족한것으로 느껴집니다. 앱사용성 관점에서 볼수있는 항목인지는 모르겠지만, 하단 우측롤링 영역을 보면 "최근 본 상품과 함께 보면 좋을 상품", "최근 본 상품과 비슷한 상품", 최근 본 상품과 함께 구매한 상품", 최근 본 상품과 연관된 테마상품" 이렇게 비슷한 테마로 여러 항목이 노출되는것을 볼 수 있습니다. 만약 정말 고객이 최근 본 상품과 비슷한 상품을 보려는 목적을 가지고 있었다고해도, 이 중에 어떤것을 선택할지 굉장히 고객으로 하여금 생각하게 만드는 배치라는 생각이 듭니다. 비슷한 여행앱으로 여기어때 케이스를 찾아보았는데요.여기어때Good: 보통은 가장 상단 배너영역에 여러가지 프로모션, 서비스에서 가장 강조하고싶은 부분을 넣는것이 일반적인데, 상단에 카테고리를 분류해 고객으로 하여금 원하는 항목에 바로 들어가 검색할 수 있게 아이콘을 배치한것이 색다르게 느껴집니다. 일반적인 레이아웃은 아니지만 사용자로 하여금 새롭게 학습을 유도할정도의 새로운 배치는 아니라고 생각되어 good case에 넣었는데, 보통 내부 데이터를 통해 검색구매비중이 높다는것을 확인해 카테고리를 상단배치한것이 아닌가 하는 생각이 듭니다.Bad다양한 서비스를 상단에 short-cut icon으로 제공해 분류해놓은것은 좋았지만, 아이콘 중 하나인 맛집은 불필요한 항목이지 않을까 싶습니다. 여기어때는 여행 뿐 아니라 다양한 일상속 레저, 액티비티를 검색하고 이용할 수 있게하는 서비스인데, 검색버튼이 하단에 위치해 다소 가시성이 떨어지는것도 아쉬운 부분입니다.Shot-cut icon에서 해외항공, 해외숙소 아이콘이 신규추가된것으로 보이는데, 해외숙소에 해외항공과 마찬가지로 비행기 아이콘이 포함되어 있어 아이콘만 보았을 때는 고객에게 혼선을 줄 수 있는 디자인인것 같습니다. 쿠폰, 룰렛, 이벤트 3가지 비슷한 성격의 항목은 이벤트나 혜택으로 통일해 랜딩한다면 공간낭비를 줄일 수 있을것같습니다.여기어때도 마찬가지로 중간부분에 더보기> 만 사용하기도하고, 특가호텔 더보기> 를 사용하기도 하는데, cta문구가 통일되지 않아보입니다. 가장 하단에 취향대로 맛집어때? 는 비즈니스상 필요한 부분일지 모르겠지만 "더파티 부산단독특가>", "무한등심vs조개창고>" 배너부분도 Mass를 대상으로한 큐레이션처럼 느껴지지 않고, 그렇다고해서 지역이나 개인취향을 고려하지 않은 큐레이션이라고 생각해 공간을 낭비하고 있다고 생각합니다.다른 여행앱으로 트리플도 살펴보았는데, 트리플 앱도 마찬가지로 good&bad case로 보이는것들이 있었습니다. 한가지 앱에서 good/bad케이스를 모두 찾아볼 수 있었고, 모든 사용자를 만족시키기는 어려운 부분이라는 생각이 듭니다. 하지만 강의때 말씀주신것처럼 레이아웃이나 메세지에 일관성이나 통일성이 있고, 서비스 이용을 용이하게 유도하고, 무엇보다 우리 앱을 켜고 사용하는 고객이 가장 필요로 하는것이 무엇일지에 집중해서 디자인하는것이 중요하다는것을 과제를 하면서 다시한번 느낄 수 있었습니다. 감사합니다^^
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
UI 디자인 원리가 잘 적용된 사례와 아닌 사례
안녕하세요, UI 디자인 원리 중 "유사성과 근접성"원리가 잘 적용된 사례와 아닌 사례에 관하여 글을 남깁니다. 좋은 UI 사례 - Skyscanner Skyscanner는 게슈탈트 이론 중 “유사성”의 원칙을 잘 실현한 사례같습니다. 어플 첫 화면에 들어가면 사용자는 콘텐츠가 크게 3가지 요소로 나눠지는 것을 알아차릴 수 있습니다. 각 요소는 아이콘의 쉐입, 크기, 컬러, 배치에서 차이를 두어 사용자가 시각적으로 요소를 구별하여 정보를 그룹화하도록 돕습니다. 디자인으로 각 요소 간 차별성을 두기 때문에 각 정보에 대한 부제를 달지 않더라도 사용자가 각 정보를 그룹화할 수 있도록 돕기 때문에 간결한 UI를 구축할 수 있는 것 같습니다. 안 좋은 UI 사례 - 마이리얼트립 마이리얼트립도 유사성과 근접성의 원리를 활용하여 정보를 그룹화했다고 보입니다. 하지만 각 요소 간의 우선순위를 찾기 어려워 사용자가 한눈에 정보를 그룹화하기는 힘들게 느껴집니다. 첫 화면에 검색창, 여행 정보, 서비스 배너, 정보 아이콘, 큐레이팅 콘텐츠 순으로 나열되어 있는데, 각 요소의 배열 순서와 크기는 사용자에게 정보의 우선순위를 보여주고 있지 않다고 생각합니다. 그렇기 때문에 사용자가 각 요소의 정보를 스캔하고 원하는(혹은 목적하는) 정보를 찾는 시간이 걸려 직관적인 서비스라고 보기 어렵습니다. 즉, 유사성과 근접성의 원칙을 고수하는 것과 더불어 콘텐츠의 우선순위를 정하고 이에 맞게 차별화를 해야 CTA까지 고려한 UI라고 볼 수 있을 것 같습니다.
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
좋은 UX 사례와 안 좋은 UX 사례
안녕하세요, 미션으로 내주신 좋은 UX 사례와 안 좋은 UX 사례에 관해 글을 남깁니다. 강의해주신 UX 디자인 원리 중에 "행동 유도성의 원리"를 토대로 사례를 찾아봤습니다. 좋은 UX 사례 - Booking.com 행동 유도성의 원리를 토대로 찾아본 좋은 사례는 “Booking.com”입니다. 사용자의 행동을 유도할 수 있는지는 서비스 혹은 프로덕트가 사용자가 이를 사용하는 목적에 부합하는 UX를 제공하는지에 달려있다고 생각합니다. Booking.com의 사용자는 해당 서비스를 이용하려는 목적이 여행 시 숙박시설을 찾고자 함에 있고, 해당 어플은 첫 화면에서 목적에 부합하는 서비스를 가시성 있게 제공하고 있습니다. 사용자가 어플을 시작하자마자 사용자 목적에 맞는 표를 볼 수 있도록 첫 화면 상단에 위치하여 바로 숙박시설을 찾을 수 있도록 유도하고 있습니다. 또한 표의 필터를 목적지, 일정, 동반자로 단순화시켜 사용자가 사용함에 어려움이 없도록 하며, 표의 테두리를 노란색으로 디자인해 보다 중요성이 떨어지는 다른 콘텐츠와 차별성을 두고 해당 정보를 눈에 들어오도록 장치해 두고 있습니다. 안 좋은 UX 사례 - 테이블링 반면 사용자의 목적에 부합하지 않는 서비스를 제공한다면 사용자의 행동을 유도하는 것이 어렵다고 생각합니다. 테이블링 어플의 목적은 “웨이팅 맛집 줄서기 앱”입니다. 즉, 사용자는 “원하는”식당에 웨이팅을 걸기 위해 어플을 사용하는 것입니다. 하지만 어플 첫 화면에서는 식당 검색을 할 수 있는 아이콘이 왼쪽 상단에 작게 위치하거나 두 번째 탭에 위치하고 있어 사용자가 검색창을 한번 더 찾아야 하는 번거로움이 있습니다. 어플을 열자마자 보이는 첫 화면에 있는 “뭘 좋아할지 몰라서 다 준비했어요!”나 “따끈따끈한 신상 맛집!”리스트는 사용자가 제일 원하는 정보라기보다는 부차적인 요소라고 생각합니다. 오히려 사용자의 행동을 유도하기 위해서는 사용자 목적에 부합하도록 검색 페이지를 첫 번째 화면에 띄우는 것이 보다 효율적인 UX를 제공할 수 있을 것 같습니다.
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
좋은 UX 사례 나쁜 UX 사례
토스를 예로 들고 싶어요. 토스는 '행동유도성'에 있어서 '생각할 필요' 없이 바로바로 사용하고 배우지 않아도 무슨 의미인지 이해할 수 있도록 세심한 배려가 녹아들어가 있죠. 토스는 내가 어떤 은행계좌에 얼마가 그래서 송금을 어떻게 보낼지 고민할 필요가 전혀 없습니다. 처음 접속 화면에서 바로 핵심 기능인 '송금' 에 대해서 버튼까지 바로바로 보이기 때문이죠. 반면에 KB 스타뱅크는 사용성을 개선했다고는 하지만 다른 은행 계좌에서 송금을 하려면 별도의 '탭'을 통해 다른 페이지로 들어가서 송금을 해야만 합니다. 복잡하고 처음 할때는 뭘 어디서 눌러서 들어가야할지 이것저것 시도해봐야 하죠.
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
유사성 원리에 따른 UI 디자인 잘 된 사례, 아닌 사례 비교
잘된 사례 유사성의 원리가 잘 적용된 사례로 퍼블리의 웹 사이트를 찾았습니다. 퍼블리는 컨텐츠를 직사각형의 이미지로 소개해 줍니다. 그러나 상대적으로 중요도가 떨어지는 정보(인기 컨텐츠 순위)는 신규 발행 컨텐츠에 비해 크기를 줄여 배치하여 부수적인 요소임을 사용자가 인지하기 편하게 디자인 하였습니다. 또한 컨텐츠 간의 간격을 충분히 넓게 배치하여 근접성 원리에 따라 각각 컨텐츠도 구분이 쉽도록 도와 주고 있습니다. 아닌 사례 유사성 원리가 아쉽게 적용된 사례로 우체국 택배 접수 시스템을 찾았습니다. 각 버튼의 색깔과 크기, 배치까지 모두 제각각이라 각 버튼의 기능과 위계를 알기 어렵습니다. 상대적으로 중요한 택배 접수용 버튼은 크기를 조금 키우고 색깔을 빨간색으로 배치하여 상대적으로 주목이 되나 미예약 확인, 조회 버튼도 빨간색으로 처리하여 혼선을 줍니다. 또한 유사성의 원리는 아니지만 CTA 측면에서도 사용자가 다음에 무슨 행동을 우선적으로 취해야 할 지 알기가 어려워서 헤매이게 되는 디자인입니다. 가장 중요한 ‘등록’을 ‘택배 등록’ 이라는 이름으로 통일하고, 그 다음으로 중요한 ‘라벨 인쇄’를 부각하여 CTA만 개선해도 훨씬 사용하기 편한 디자인이 될 듯 합니다.
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
오늘의집으로 ui분석하기
'오늘의 집' 어플을 선정해서 분석했습니다. 이 화면은 사용자들이 보게되는 첫 페이지인데요. 근접성의 원리에 따라 3공간으로 나눠진다고 생각합니다. 먼저 첫페이지에 들어왔을 때 느낀 감정은 "복잡하다" 였습니다. 그이유는 10개의 버튼이 한번에 몰려 있었기 때문인데요. 유사성의 원리에 따라본다면 10개의 버튼이 비슷한 카테고리의 버튼이여야 할텐데 각자 다 다른 카테고리 였습니다. 그로인해 가시성도 나쁘다고 생각했습니다. 10개의 버튼 중 내가 원하는 버튼을 찾아야 한다는 것이 사용자로 하여금 스트레스를 줄 수 있으니 좋은 UI디자인은 아니라고 생각합니다. 오늘의집 1인 사용자가 저라는 것을 가정했을 때 제가 오늘의 집 어플을 이용하는 가장 큰 이유는 '쇼핑'과 '남들의 방은 어떨까?(N평집들이,공간별사진)" 입니다 이를 토대로 오늘의 집 첫 페이지 UI를 분석했을 때, 빠른가구배송과 간편시공, 쉬운이사 버튼(버튼이라는 용어가 맞는지 모르겠습니다 피드백 부탁드립니다! )이 10개 버튼안에 들어갈 필요가 있을까? 라는 생각을 했습니다. 그리고, 오늘의 딜, 0원이벤트 가구세일중 등등 세일 관련한 것들은 결국 '쇼핑하기'와 연결되는 부분이니 쇼핑하기 아이콘 옆에다가 나란히 배치해 유사성의 원리에 따라 디자인해보면 어떨까? 생각했습니다. 이 화면은 '쇼핑하기' 버튼을 눌렀을 때 나오는 화면입니다 간단한 카테고리 구분과 작은 대표사진을 통해 가시성을 높여, 사용자들의 쉬은 접근을 가능케하고 원하는 상픔을 클랙해서 쇼핑할 수 있도록 쉽게 구성되어 있는 것 같습니다. 이 부분은 휴리스틱 평가 중 시스템 가시성과 미학적이고 미니멀한 디자인 부분을 기준으로 좋은 ui디자인 인 것 같습니다. 추가로 각 버튼마다의 간격이 가로세로 둘다 일정하게 배치되어 있어 사용자가 시각적인 편안함까지 느낄 수 있어 좋은 Ui라고 생각했습니다 감사합니다
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
선생님 메일로 과제 보냈습니다!
과제 보냈습니다. 확인 및 피드백 부탁드립니다!
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
휴리스틱 평가 기반 사이트 분석
안녕하세요? 저는 최대한 휴리스틱 평가에 기반해서 은행이라는 타이틀 아래, 하나은행과 신한은행 사이트를 분석해 보았습니다. 1. 하나은행 사이트는 elements를 디자인적으로 그룹화해서 비슷한 기능을 하는 그룹처럼 보이게끔은 해두었다. 하지만, 이 element들이 어떠한 topic에 의해 그룹핑이 되었는가에 대한 의문이 든다. 특히, 그룹 B는 주요 기능이라고 하기에는 직관적이지 않다고 생각이 든다. 중요한 정보를 가지고 있는 텍스트에 비해 아이콘이 상대적으로 너무 크고 화려하다. 이에 그치지 않고 심지어 텍스트는 사용자의 익숙함을 고려하지 않은 듯하다. 과연 중장년층 또는 노인이 ‘오픈뱅킹’, ‘채팅상담’ 등에 대한 단어에 익숙할까? 그룹 A의 ‘조회’는 ‘이체’와 일관성을 갖는 것으로 보아, 본인의 계좌 조회임을 유추할 수 있었지만, 그룹 B의 ‘빠른 조회’는 그룹 B의 어떠한 기능과 일관성을 갖는 것일까? 무엇을 빠른 조회하기 위한 기능일까? 의문을 고객에게 전가한다고 생각한다. 2. 그에 반해, 신한은행의 element는 직관적이고 일관적인 면을 모두 갖고 있다고 본다. 그룹 B 와 C의 경우 디자인으로 그룹핑하여 같은 depth의 기능임을 일관되게 보여주었으며, 또한 해당 그룹에 직관적인 타이틀을 달아 각 그룹의 topic을 사용자가 고민할 필요 없이 알아볼 수 있게 하였다. 그룹 A같은 경우, 그룹 B나 C와 같이 타이틀은 존재하지 않지만, 디자인적으로 이 그룹이 이 메인 홈페이지에서 사용자가 가장 원하는 기능을 담고 있다는 것을 일관되고 직관적으로 보여준다. 추가로, 잘 된 UX 디자인과 잘되지 않은 UX 디자인에 대한 과제를 이메일로 보냈었는데, 함께 확인 부탁드립니다. 감사합니다.
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
[UX/UI] Good and Bad example
전자책/ 오디오북 이용 사이트 Bad: Audible 1. 플랜에 따른 가격 안내가 모호함 - Audible free, plus, premium의 구분이 확실치 않음 -1 credt을 받을수 있는 플랜과 아닌 플랜에 대한 설명이 확실하지 않음 ex) audible 사이트 접속 첫페이지 2. 책의 카테고라이징의 구체적인 분화가 필요함 ex) audible 사이트 접속 첫페이지 3. 오디오 북과 전자책의 구분이 모호함 4. 아마존 계정으로만 로그인이 되는게 불편함 (SSO) ex) audible 사이트 로그인 페이지 Good: 밀리의 서재 1. 밀리의 서재를 이용하면 사용자가 얻을수 있는 장점과 도서 분류가 확실하게 전달됌 2. 전자책과 오디오 북의 구분이 책 상단 오른쪽 아이콘으로 구분이 쉬움 ex) 밀리의 서재 사이트 접속 첫페이지
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
비핸스와 그라폴리오에서의 디자인 원리
포트폴리오 사이트인 비핸스와 그라폴리오 두 가지를 비교해보았습니다. 비핸스는 화면 상단에 오늘 진행중인 작업들을 유사성있게 묶어두었습니다. 하단에 포트폴리오는 상단과는 다른 모양로 디자인한 뒤 유사성있게 배치하여 유저가 상하단이 다른 항목임을 인식할 수 있도록 하였습니다. 근접성을 이용해 각 포트폴리오의 메인 이미지, 제목, 작업자가 한 눈에 들어오게 했고 상자로 묶어 포트폴리오들의 유사성을 더욱 강화했습니다. 또한 하단에 내 페이지-팔로잉 버튼은 CTA 이론이 적용된 스위치버튼을 이용하여, 현재 '내 페이지' 항목이 있으며 드래그하면 '팔로잉' 으로 이동할 수 있게 하였습니다. 그라폴리오 역시 근접성을 이용해 메인 이미지, 제목, 작업자를 묶어 배치하였고 상자로 묶어 유사성이 느껴지게 했습니다. 다만 메인 이미지마다 크기가 달라 비핸스만큼 유사성이 느껴지지 않았고, 제목과 작가를 확인하기 위해서 시선이 지그재그로 흘러야 한다는 점이 아쉬웠습니다.
- 미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
애널리틱스
안녕하세요. 사용자 리서치에서 공감하기 정의하기 부분에서 애널리틱스를 활용한다고 하셨는데 그럼 이를 위해 애널리틱스 아카데미에서 구글 애널리틱스 자격증을 취득하는 것이 좋을까요?