Product Designer 의 UX UI 스터디

요약 좋은 에러 메세지들은 중하지만 좋은 디자인은 문제가 발생하기 전에 미리 예방하는 하는 것이다. 오류가 발생하기 쉬운 조건을 제거하거나 작업을 수행하기 전에 해당 조건을 확인하고 사용자에게 확인 옵션을 제공하는 것이 예방책이 될 수 있다. - 두가지 유형의 사용자 오류 적절한 피드백을 통해 항상 사용자에게 진행 상황에 대한 정보를 제공하여야한다. 사용자가 현재 시스템 상태를 알게되면 이전 상호 작용의 결과를 학습하고 다음 단계를 진행을 결정 할 수 있다. 예측 가능한 상호작용은 제품 뿐만 아니라 브랜드에 대한 신뢰를 형성한다. Slip (살짝 미끄러진 정도) 사용자가 부주의 하여 잘못 글자를 타이핑하거나, 실루소 치약대신 액체 손 비누를 칫솔에 묻힌 것 같은 실수를 말한다. 완전히 집중하지 못할때 발..

요약 사용자들은 전형적인 제품 디자인에 익숙해져있다. 파란색 밑줄이 그어진 텍스트는 클릭이 가능하고, 쇼핑 카트 아이콘은 구매하려는 아이템을 나타내며, 이러한 것들은 모든 디지털 서비스에 항상 사용되며 편의성을 제공하는 전형적인 디자인 요소들이다. 일관성과 표준 준수는 모든 앱을 똑같이 디자인해야한다는 것을 말하는 것이 아니라 사용자가 무엇을 기대해야하는지 알고 학습효율을 높이는데 목적이 있다. - 연속성있는 일관성 사용하기 쉬운 제품은 내부 및 외부적으로 일관성이 있는 것들이다. 제품 내부 일관성 제품 내 일관성은 제품 한개 또는 제품 그룹내에서의 일관성을 말한다. 예를 들어 마이크로소프트 오피스 앱들을 사용하다보면 일관된 앱 아이콘, 홈 윈도우 그리고 메인 메뉴들이 디자인 되어있는 것을 볼 수 있다...

요약 사용자의 통제력을 UI에서 높인다는 것은 사용자는 신속하게 실수를 수정하거나 선택한 것을 취소할 수 있어야함을 의미한다. 문제에서 쉽게 벗어날 수 있어야하며, 쉽게 할 수 없을 경우 사용자는 갇힌 느낌을 받거나 불편하다고 생각 할 수 있다. - 시스템의 이전 상태로 돌아 갈 수 있는 UI컨트롤들 1.뒤로가기버튼 : 사용자가 이전 페이지 또는 화면으로 되돌수 있다. 2.취소버튼 : 사용자는 하던 작업을 끝내거나 여러 단계의 작업을 취소할 수 있다. 3.닫기버튼 : 닫기버튼은 유저가 보고 있는 새로운 뷰를 닫을 수 있다. 4.이전작업 버튼 : 유저인터페이스에서 작업하던 이전 작업으로 되돌릴 수 있다. 사용자에게 항상 이전 단계로 이동 할 수 있도록 허용 뒤로가기 단추를 클릭하여 서치를 하는 사용자들을 ..

요약 시스템은 유저가 익숙해하는 언어와 문구 컨셉으로 말해야한다. 현실 세계에서 통용되는 전형적인 소통언어들을 따라야하고 자연스러고 일반적인 순서로 정보가 나타나야한다. 이러한 현실세계와 매칭된 시스템은 유저들이 공감과 인정 할 수 있다. - 익숙한 언어 만약 사람들이 어떤 사이트에서 사용되고 있는 용어들을 이해하지 못한다면, 사용자들은 확신이 없고 무시당한 느낌이 들거나 다른 곳으로 가서 설명을 찾아보게 될 것이다. 사용자들은 검색 엔진에서 단어의 정의를 찾아보지 않고도 항상 의미를 이해 할 수 있어야한다. 토스의 경우 금융 정보를 쉽게 이해 할 수 있도록 UX writer가 사용자의 눈높이에 맞춰 문장을 작성한다. 그들은 '잡초 뽑기'라는 항목이 잇어서 잡초는 문장안에서 아무런 기능을 하지 않는 단어..

요약 현재 상태를 유저에게 알려주는 것은 시스템을 조작 할 수 있다는 느낌을 전달 할 수 있고, 사용자가 적절하게 행동을 취하여 원하는 목표를 이룰 수 있도록 한다. 이런 상태 가시성은 브랜드를 신뢰 할 수 있게 한다. - 언제 어디서든 잠깐 시간을 갖고 돌아보면 당신이 처한 현재 상태에 대해 표시해주는 것들이 주변에 있다는 것을 알 수 있다. 예를 들어 베터리가 내 모바일이나 노트북에 얼마나 남았는지, 이메일에 안읽은 이메일이 얼마나 있는지, 지하철을 타고 있다면 다음 역은 어디인지 알려주는 것들이 많다. 이러한 모든 정보를 통해 상호작용하는 시스템의 현재 상태를 정확하게 알 수 있다. 정보의 힘 사용자에게 얼마나 시스템 상태 정보가 잘 전달 되는지 나타내어야하고 이상적으로는 시스템은 합리적인 시간내에..

2022년 그래픽 디자인 트렌드 8가지 다양성을 보여주는 비주얼(Inclusive visuals) 재미있는 데이터 시각화(Fun data visualizations) 대담한 배경(Bold backgrounds) 다채로운 아이콘과 삽화(Colorful icons and illustrations) 세리프체(Serif fonts) 브랜드 밈(Branded memes) 인용 부호(Quotes) 소셜 스크린샷(Social screencaps) - 1.다양성을 보여주는 비주얼(Inclusive visuals) 사람의 평등과 다양성을 포함한 디자인을 더욱 자주 보게 될 것이다. 더 많은 인종, 성별, 그리고 체형을 반영하는 다양한 이미지와 아이콘을 볼 수 있다. 대표적인 이미지로 한개의 성별 또는 인종으로 표현되는 ..

Product Designer로 경력을 쌓으며 공부를 꾸준히 하기위해 UX UI 뿐 아니라 트랜드에 관련된 글들을 정리하려고 만든 블로그입니다. 공부하시는 모든 디자이너들을 응원합니다! 문의 : potatohandskim@gmail.com

요약 : 10가지 일반적인 유저 인터페이스 디자인 원칙으로 광범위한 적용내용이기에 "Heuristics 휴리스틱"이라고 불린다. - 1.시스템 상태 가시성 사용자에게 진행 상황에 대한 정보를 제공해야한다. 사용자가 현재 시스템 상태를 알 수 있도록 해야한다. 지금 어느 단계에 있는지 알고 다음 단계를 쉽게 결정 할 수 있도록 학습시킬 수 있어야한다. 예측 가능한 상호작용은 서비스뿐만 아니라 브랜드에 대한 신뢰를 높인다. - 시스템 상태를 명확하게 전달 - 사용자에게 알리지 않고 결과가 초래되지 않도록 해야함 - 사용자에게 피드백을 최대한 빨리 제공 (즉시 제공이 바람직함) - 개방적이고 지속적인 커뮤니테이션을 통해 신뢰를 쌓을 수 있음 예시 쇼핑몰에서 결제를 하기전단계에 있다면 어느 버튼을 눌러야지 결제..

요약 : 서비스 블루프린트는 프로세스를 순서대로 조직화하여 비지니스가 어떻게 유저경험을 전달하는지 한눈에 볼 수 있다. - 서비스 블루프린트란? 서비스 블루프린트는 고객이 서비스를 경험하며 접점으로 연결된 사람, 물리적인 혹은 디지털 상품이나 서비스 그리고 과정들을 처음 부터 끝까지 구성요소 간의 관계를 시각화하는 다이어그램이다. User Journey map과의 차이는 유저가 겪는 경험의 지점만 그리는 것이 유저 저니 맵이라고 한다면 서비스 블루 프린트의 경우 고객의 경험과 서비스를 제공하는 제공자의 여러 점접을 모두 그려보는 것이다. 예를 들어, 요식업의 경우 테이크아웃과 식당에서 식사를 하는 주문 작업의 경우 다른 서비스 블루프린트를 가질 수 있다. 이 전체 다이어그램을 그려봄으로 불필요한 중복성을..

요약 : 사용자 태도와 행동을 공감맵으로 시각화하여 사용자에 대한 깊은 이해를 UX팀이 할 수 있다. 기존 사용자의 데이터의 어떤 부분이 부족한지 알 수 있다. - Empathy Mapping 리서치 단계에서 얻은 내용을 공감하고 사용자의 니즈에 대한 예기치 않은 통찰력을 이끌어내는데 도움된다. UX팀뿐만 아니라 이해관계자, 마케팅 및 영업, 제품개발 또는 크리에이티브 팀이 최종 사용자에게 공감대를 형성할 수 있게 한다. 이 맵핑은 집중시킬 수 있는 4가지 주요영역을 제공하여 경험에 대한 내용을 도출해낸다. 공감지도는 향후 만들려는 Persona의 배경으로해도 좋다. 지도는 4개의 사분면으로 구성되어 사용자가 하는 말, 생각, 행동, 감정 또는 느낌을 적어내며 채워 갈 수 있다. 1. Says 말 : 사..