제어장치(controller)를 조작할때 보여지는 디스플레이나 인터페이스를 사용자가 예측할 수 있도록 하는 것이다. 예를 들어 로그인 버튼을 눌러 로그인에 성공하면 홈화면으로 가겠구나라는 예상이 된다. 또는 블로그에서 글작성 완료 버튼을 클릭하면 내가 작성한 글을 보여주거나 글목록 화면으로 이동하겠구라고 예측할 수 있도록 디자인하는 것을 말한다. 에어비앤비 헤더를 보면 사용자가 숙박할 수 있는 숙소의 카테고리가 나오는데 이탈리아 사람이든 한국 사람이든 아시아 사람이든 누가 봐도 클릭하면 어떤 숙소들이 화면에 보여질지가 예상가능하다. 에어비앤비 숙소 리스트를 살펴보면 대응의 원리가 숨어있다. 예약할 숙소사진의 좌측하단에 해당 숙소를 공유하는 호스트 사진도 함께 보여준다. 이는 해당 숙소의 주인이라는 것을 ..

멘탈모델이란 사용자가 실제 생활에서 경험하고, 지식으로 터득한 기대치나 예상치를 의미한다. 예를 들어, 형광등 전원 스위치를 생각해보자. 전원 스위치는 위아래로 온오프하는 것이 일반적이고 그렇게 경험으로 학습되어 있다. 그래서 새로운 전원 스위치를 개발한다고 하더라도 신제품의 사용법도 유사할 것이라고 기대한다. 이것이 멘탈모델이다. 실제 신제품의 사용법은 동일할수도 동일하지 않을수도 있지만 아무튼 신제품 자체는 콘셉트 모델이다.

사용자가 제품이나 서비스를 처음 사용하려고 할때 직관적으로 어떻게 사용하는지 알 수 있도록 하는 것을 말한다. 즉, 설명서 없이도 고민하지 않고 쉽게 사용할 수 있도록 유도하는 것이다. 예를 들어 위와 같이 어떤 프로그램을 설치한다고 해보자. 설치과정은 꽤나 복잡하고 번거로운 과정이다. 이때 위와 같이 기본값을 미리 선택해두는 것은 좋은 행동 유도성을 가지고 있다. 왜냐하면 사용자는 라디오버튼이나 체크박스를 어떻게 사용하는지 모를수 있는데 위와 같이 체크된 상태와 체크되지 않은 상태가 모두 보이기 때문에 사용자에게 라디오 버튼이나 체크박스를 사용할 수 있도록 힌트를 준다. 두번째 이유로는 사용자는 해당 프로그램을 처음 사용하기 때문에 선택할 옵션에 대하여 잘 모를 가능성이 높다. 이때 기본값을 설정해두면..

* 사용자의 편안함 화면의 레이아웃, 색상, 폰트크기 등이 항상 일관성을 유지하면 사용자는 익숙함과 편안함을 느낀다. 익숙하다는 것은 사용자가 다음에 오는 행동에 대하여 예측이 가능하다. 일관성이 없으면 사용자는 새로운 앱이 나올때마다 사용법을 다시 배워야 하기 때문에 불편함과 피로함을 느낀다. 예를 들어 애플의 ios 에서는 탭 바를 하단에 두도록 권고하지만, 구글의 안드로드이는 상단에 위치시킬 것을 권장한다. 그래서 아이폰 사용자들은 앱을 사용할때 탭바가 주로 하단에 있음을 경험하였기 때문에 새로운 앱을 설치하더라도 탭 바가 하단에 있을 것이라고 예상한다. 만약 탭바가 상단에 위치한다면 아이폰 사용자는 불편함을 느낄것이다. * 작업시간 단축 및 재활용성 앞서 설명한것처럼 디자인 가이드 문서나 디자인 ..

UX 개념 UX 는 User Experience 의 줄임말로 사용자가 어떤 제품이나 서비스를 통해 경험하는 모든것을 의미한다. 단순히 웹상이트나 앱에서 경험하는 가상의 경험뿐만 아니라 실제 생활에서 겪는 물리적인 경험도 포함된다. 예를 들어, 길거리를 걸어가는데 목적지까지 안내문구가 길바닥에 적혀있어서 길을 찾기 쉬웠던 경험이라던지 까페에 가서 좋은 커피향을 맡으면서 음악을 들은 기분좋은 경험과 같은 모든 것들이 UX에 해당한다. UX 디자인 디자이너의 직감이나 생각이 아닌 사용자 관점에서 사용자가 겪을수 있는 경험을 디자인하는 것을 의미한다. 사용자가 현재 제품이나 서비스를 사용하면서 가지고 있는 문제나 불편함을 해결하는데 중점을 둔다. 교보문고에 가면 중간에 책을 읽을수 있는 넓은 테이블이 있고, 위..

https://nicecarrot2.tistory.com/193 [figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등) [figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등) 안녕하세요. 당근입니다. 오늘은 피그마 프로토타이핑에 대한 포스팅입니다. 프로토타이핑 할 때, 어떤 버 nicecarrot2.tistory.com

https://www.codestates.com/blog/content/%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%82%AC%EC%9A%A9%EB%B2%95 피그마(Figma) 사용법 | 기본 단축키부터 유용한 기능까지 - 코드스테이츠 공식 블로그 UX/UI 분야에서 커리어를 쌓고 싶다면 피그마는 필수로 알아야 할 툴이 되었는데요. 이번 글에서는 피그마 소개와 피그마가 주목받는 이유 그리고 피그마 단축키, 유용한 기능 등 기본적인 사용 www.codestates.com https://brunch.co.kr/@applehong 기획자 첼라의 브런치스토리 레탑피그마 기획자 | 현직 시니어 웹기획자입니다. Figma 를 이용하여 화면 설계, 디자인, 프로젝트 관리까지 실무에서 경험한 노하우를 나..