Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie UX 디자인에 대하여
Ähnlich wie UX 디자인에 대하여 (20)
UX 디자인에 대하여
- 1. presented by Jang Seong Jin About User Experience Design
- 2. UI, 인터랙션, UX
- 7. 협의의 UX UI, 인터랙션, UX User Experience 인터랙션 UI 목적 달성 절차 만족감, 고급감, 브랜드
- 11. UX Design? 사용자가 목적 달성 과정을 만족할 수 있도록 만드는 것. User Experience
- 17. 궁극적인 UX 디자인 목표 상품의 가치를 높이는 것.User Experience
- 18. UX 디자인을 어떻게?
- 19. 좋은 UX 디자인! 사용자는 사용법을 예측하고, 사용법을 기억하고, 사용법을 회상한다. 인지심리학 이론
- 21. 시선의 움직임 구텐베르크 다이어그램 주시영역 강한 유휴 영역 약한 유휴 영역 종점 영역
- 23. 시선의 흐름 시선의 흐름을 알면, 사용자가 예측하기 쉽게 디자인할 수 있다. User Experience
- 24. 지각 체계화 원리 여러 개의 시각 자극을 의미 있는 집단으로 묶는 과정 User Experience
- 27. 인터랙션 설계원칙
- 28. UX 디자인을 해보자!
- 30. 매점아저씨
- 33. 교실, 운동장, 급식실.
- 37. 빵, 과자, 음료수.
- 38. 가격은 싸고, 양은 많고, 맛있는 거.
- 41. UX 디자인은 우리 근처에 있다.
- 42. 참고자료 UX 디자인 7가지 비밀 전략적 UX 디자인으로 성장하라 story.pxd.co.kr gsrealdesign.tistory.com
Hinweis der Redaktion
- 안녕하세요. 저는 작년 선린인터넷고등학교 멀티미디어과를 졸업한 장성진입니다. ANT홀딩스에서 UI/UX 디자이너로 있다가 현재는 ‘에디켓’이라는 스타트업에서 웹디자인, 영상디자인을 하고 있습니다. 제가 오늘 발표할 내용은 UX 디자인, 사용자 경험 디자인에 관련된 내용입니다. UX 디자인이 와닿지 않으시는 분이 많으실거라 생각합니다. 그러나 개발자, 디자이너라면 제품을 만들면서 모두 해보았거나, 하실겁니다. 그만큼 중요하다고 말할 수 있고 개발자, 디자이너, 좋은 제품을 만드려는 사람들에겐 뗄레야 뗄 수 없는 존재라고도 할 수 있습니다.
- 우선 UX에 대해 설명하기전에 많이 헷갈려하는 세가지를 이야기하겠습니다. UI, 인터랙션, UX가 어떻게 다를까요? 차이점을 설명해보라고 하면 많은 이야기를 하지만 그 차이를 분명하게 설명하는 사람은 매우 드뭅니다. 집합 개념을 사용하여 UI, 인터랙션, UX가 어떻게 다른지 설명하겠습니다.
- UI는 사용자와 제품 사이에 존재하는 면으로 여기에서 사용자와 제품 간의 상호작용이 발생합니다. 알다시피 제품의 UI에는 입력장치와 출력장치가 있습니다. 사용자가 제품을 사용하기 위해 입력장치를 조작하면 제품은 출력장치를 통해 적절한 정보를 제공합니다. UI의 입력장치에는 버튼, 다이얼, 스위치 등 다양한 형태의 것들이 있고 출력장치에는 디스플레이, 스피커 등이 포함됩니다.
- iPhone을 예로 들어 설명하면, UI의 입력장치에는 벨/진동버튼, 볼륨조절버튼, 홈버튼, 전원버튼, 마이크, 카메라, 센서들이 포함됩니다. UI의 출력장치에는 디스플레이, LED, 이어폰단자, 스피커, 진동 모터 등이 있습니다. UI는 물리적 장치뿐만 아니라 출력장치를 통해 제공되는 정보도 포함됩니다. 디스플레이를 통해서 보여지는 시각 정보, 대개 이 시각 정보만 UI라고 생각하는 분들이 많습니다. 그리고 스피커를 통해 전달되는 청각 정보, 진동 모터를 통해 전달되는 촉각 정보. 이 모든게 다 UI에 포함됩니다.
- 인터랙션은 상호작용. 즉, 사용자가 목적을 달성하기 위해 제품의 UI를 사용하여 상호작용하는 과정을 의미합니다. 이 때 사용자는 입력장치를 조작하고 제품은 그에 해당하는 반응을 출력장치를 통해 제공합니다. 아이폰을 예로 들면 전화를 걸기 위해 통화 버튼을 눌렀을 때 최근 통화목록이 화면에 표시되고, 화면 위아래로 손가락을 쓸듯이 플릭하면 통화목록이 상하로 스크롤됩니다. 이미지에서 옆으로 슬라이드하면 삭제버튼이 나오는 것처럼요. 이렇게 사용자와 제품이 상호작용하는 과정이 인터랙션입니다.
- 인터랙션은 상호작용. 즉, 사용자가 목적을 달성하기 위해 제품의 UI를 사용하여 상호작용하는 과정을 의미합니다. 이 때 사용자는 입력장치를 조작하고 제품은 그에 해당하는 반응을 출력장치를 통해 제공합니다. 아이폰을 예로 들면 전화를 걸기 위해 통화 버튼을 눌렀을 때 최근 통화목록이 화면에 표시되고, 화면 위아래로 손가락을 쓸듯이 플릭하면 통화목록이 상하로 스크롤됩니다. 이미지에서 옆으로 슬라이드하면 삭제버튼이 나오는 것처럼요. 이렇게 사용자와 제품이 상호작용하는 과정이 인터랙션입니다.
- UX는 사용자가 목적 달성 과정에서 느끼는 종합적인 만족을 의미합니다. 볼펜을 예로 들어 설명하면 필기감이 좋고 오래 글을 써도 손가락이 아프지 않게 디자인된 볼펜은 사용자에게 좋은 경험을 제공합니다. 그러나 고급 볼펜은 필기감, 편안함뿐만 아니라 고급스러운 디자인으로 명품 볼펜을 소유한다는 자부심까지 제공합니다. 사용자가 제품에 대해 느끼는 만족감, 고급감, 브랜드 등이 UX에 포함되는 것입니다. 여기서 협의의 UX는 제품을 구입한 후 제품을 사용하는 과정에서 경험하는 UX입니다. 더 큰 개념으로 광의의 UX가 있는데 제품을 구매하기 전에 경험하는 UX입니다.
- 아침에 먹는 시리얼이 제품이라고 한다면 UX는 시리얼의 맛, UI는 숟가락이라고 할 수 있습니다.
- 아침에 먹는 시리얼이 제품이라고 한다면 UX는 시리얼의 맛, UI는 숟가락이라고 할 수 있습니다.
- 아침에 먹는 시리얼이 제품이라고 한다면 UX는 시리얼의 맛, UI는 숟가락이라고 할 수 있습니다.
- 그래서 결국 UX 디자인은 사용자가 목적 달성 과정을 만족할 수 있도록 만드는 것입니다. 방금전 나온 씨리얼의 맛이 UX라고 했는데 아침에 밥대신 씨리얼을 먹을 때 맛있어서 만족한다면 UX 디자인이 잘 되어있다고 할 수 있습니다. 여기서 목적 달성 과정은 밥을 먹는 행위고, 만족은 맛이라고 할 수 있겠죠.
- UX 디자인이 잘못된 것의 예로 예전 카카오톡 보이스톡으로 들 수 있는데 친구의 프로필사진이 바뀐걸 눈팅하다가 잘못눌러서 보이스톡을 거는 경우가 많았습니다. 바로 취소해도 “보이스톡해요~” “취소합니다.”라는 메세지는 전송되었고 친한 친구라면 상관없겠지만 만약 좋아하는 애의 프로필사진을 훔쳐보다가 누르는 순간 빼도박도 못할 상황에 처하게 됩니다.
- 그래서 이런 질문들이 지식인에 올라오게 됩니다.
- 이런 잘못된 UX 디자인을 고치기 위해 카카오톡은 바로 보이스톡이 연결되는게 아닌 한번 더 ‘통화하기’ 버튼을 눌러야 연결이 되도록 변경했습니다.
- 이런 잘못된 UX 디자인을 고치기 위해 카카오톡은 바로 보이스톡이 연결되는게 아닌 한번 더 ‘통화하기’ 버튼을 눌러야 연결이 되도록 변경했습니다.
- 카카오톡처럼 업데이트를 통해 UX 디자인을 개선하는 것은 결국 상품의 가치를 높이는 것입니다. 이것이 궁극적인 UX 디자인의 목표이기도 합니다. 처음에 좋은 제품을 만드려는 사람들에게 UX 디자인이 뗄레야 뗄 수 없는 존재라고 말했는데 이 목표때문에 그렇습니다. 좋은 제품은 상품의 가치가 높을 것이고, 여기서 상품의 가치는 좋은 UX 디자인으로 높일 수 있습니다.
- 그렇다면 UX 디자인을 어떻게 해야할까요? 여러가지 방법론에 따라 퍼소나를 정립하고, 태스크를 분석하여 디자인한다고 하는데 간단하게 말하자면 주요 고객들을 타겟팅하여 어떻게 쓸지 예측하여 디자인하는 것입니다. 만약 네비게이션 앱을 만든다고 했을때 고객들은 운전자이고, 운전중에 쓰기때문에 버튼들의 크기가 작아선 안되며 운전자의 안전을 위해 버튼을 누르는 횟수도 적게 설계해야 할 것입니다. UX 디자인은 자연스럽게 제품을 만드는 과정에서 생각하고 이루어집니다.
- 좋은 UX 디자인을 하기위해선 우선 인지심리학의 이론, 즉 사람에 대해 잘 알아야합니다. 사용자는 처음 보는 제품을 사용할 때 사용법을 예측하고 새롭게 학습한 사용법을 기억하려고 애씁니다. 초기 학습 단계 이후에 사용자는 학습한 사용법을 회상하며 제품을 사용하게 되고, 많은 시간 제품을 사용한 후에는 사용법을 대부분 기억하게 될 것입니다. 이러한 초기 학습과 제품의 사용 과정에서 사용자가 어떤 사용법을 쉽게 예측하는지, 어떤 것을 쉽게 기억하고쉽게 회상하는지는 사람의 인지적 특성과 밀접한 관련이 있습니다. 그래서 반드시 인지심리학 이론을 알아야 합니다.
- 인지심리학에 대해 깊게 들어가면 끝이 없으니 간단한 것들만 설명하겠습니다. 우리는 절대 화면에 보여지는 모든 정보를 순차적으로 읽지 않습니다. 원하는 정보만을 빠르게 탐색해서 선택적으로 취득합니다. 이것을 스캐닝, 한글로 대강읽기라고 합니다.
- 일반적으로 대강 읽기의 레이아웃시 구텐베르크 다이어그램을 적용합니다. 구텐베르크 다이어그램은 4개의 사분면으로 나누어지는데 주시영역은 고객의 시선이 가장 먼저 머무르는 위치입니다. 헤드라인과 제목같은 컨텐츠의 가장 중요한 정보를 위치시킵니다. 강한 유휴 영역은 시선의 흐름에서 많이 주목받지 못하는 영역입니다. 따라서 시선을 유도하기 위해 이미지같은 주목도가 높은 보조정보를 배치합니다. 약한 유휴 영역은 대강읽기의 패턴에서는 죽은 공간이라고 할 수 있습니다. 사분면에서 고객의 시선이 가장 가지 않는 영역입니다. 종점 영역은 시선의 흐름이 끝나는 부분입니다. 액션 버튼처럼 고객의 행동을 유발할 정보를 배치합니다. 대강읽기 시선의 움직임은 연두색 라인을 중심으로 수평 운동과 함께 아래쪽으로 이동합니다.
- 위와 같이 응모하기. 액션 버튼은 우측하단에 배치합니다. 시선이 어떻게 움직이는지 의식하면서 보면 구텐베르크 다이어그램, 시선의 흐름이 더 쉽게 와닿을 것입니다.
- 이렇듯 시선의 흐름을 알면, 사용자가 사용법을 예측하기 쉽게 디자인할 수 있습니다. 도움말로 가르쳐주지 않아도 자연스럽게 사용자가 느끼기에 있어야할 위치에 이미 존재하고 있게 만드는 것이죠. 제품을 사용하면서 “여기 버튼이 있어야 하는데? 어디있지?”하는 상황에 놓여본 적이 있으실겁니다. 그런 경우 버튼을 찾아 헤매게되고, 시간이 오래걸린다면 짜증이 나기 시작합니다. 이런 상황을 방지하기위해 시선의 흐름을 알아야합니다.
- 지각 체계화란 여러 개의 시작 자극을 의미 있는 집단으로 묶는 과정입니다. 어려운 개념인 것같지만 엄청 쉬운 개념입니다. 리모컨을 예시로 들어 설명하겠습니다.
- 일반 리모컨과 지각 체계화 원리를 적용하여 디자인한 리모컨입니다. 어떤 차이가 있는지 느껴지시나요? 오른쪽 리모컨의 버튼들은 그룹으로 인식되고 더 찾기 쉽습니다.
- 버튼들은 유사한 기능끼리 근접해있어서 그룹으로 인식됩니다. 그래서 원하는 기능을 찾을 때 더욱 쉽게 찾을 수 있습니다. 지각 체계화 원리의 기준은 근접성, 유사성, 연속성, 좋은 형태입니다. 근접성은 가까이 있는 것들을 한 그룹으로 묶는 것이고 유사성은 비슷한 것들을, 좋은 연속성은 연속된 것들을, 123456789 처럼요. 그리고 좋은 형태는 사용자에게 익숙한 형태를 한 그룹으로 묶는 것을 의미합니다. 선택버튼 주위로 화살표 버튼이 있는 것처럼 말입니다. 이처럼 지각 체계화 원리를 이용하면 사용자가 예측, 기억하기 쉽게 만들 수 있습니다.
- 지금까지 살펴본 인지심리학 이론들로 우리는 인터랙션 설계원칙을 도출해낼 수 있습니다. 사용자가 초기 학습 단계에서 잘 기억할 수 있도록 지각 체계화 원리를 사용하여 정보들을 잘 묶어서 제공하고, 시선의 흐름에 따라 자연스럽게 행동할 수 있도록 묶은 정보들을 알맞게 배치해야합니다.
- 이제 기본적인 설계원칙을 알았으니 UX디자인을 해보도록 합시다.
- 정말정말 쉬워요.
- 이제부터 당신은 매점아저씨입니다. 매점아저씨지만 아직 아무 것도 없습니다. 매점조차도요. 처음부터 차근차근 시작할텐데 우선, 매점의 위치부터 정해보도록 합시다.
- 선린인터넷고등학교의 캠퍼스 안내도입니다. 여기에서 어디에 매점을 위치시켜야 학생들이 이용하기 쉬울까요? 학생들이 1호관, 2호관, 3호관에 다 나뉘어져있어서 되게 애매하죠? 이럴땐 우선 학생들이 언제 매점을 이용하는지부터 정리해보면 쉽습니다.
- 학생들은 주로 2교시 끝나고 배고플 때, 운동하고나서 음료수나 아이스크림을 먹으려고, 점심먹고 간식을 먹기위해 매점을 이용합니다.
- 그럼 이렇게 되겠네요. 교실, 운동장, 급식실. 이 세 곳들이 만나는 지점에 매점을 위치시키면 됩니다. 간단하죠.
- 이론상 저 위치가 가장 적절할 것같습니다. 1호관 끝에서나 3호관 끝에서나 거의 동일한 거리이고, 운동장과도 가깝고, 급식실과도 크게 멀지 않습니다. 그러나 매점을 계단 중간에 세울순 없으니 다른 위치로 옮겨서 세우기로 합시다.
- 그럼 이제 매점의 위치는 정해졌으니 어떤 물건을 팔지 고민해봅시다. 근데 또 뭘 팔아야할지 잘 모르겠습니다. 아까 전처럼 다시 학생들이 어떤 물건을 원할지 정리해봅시다.
- 대부분 빵, 과자, 음료수를 원할 것 같습니다. 뭐 더 필요하다면 아이스크림정도가 있겠네요.
- 그리고 제일 중요한건 가격이 싸면서, 양은 많고, 맛있어야 잘팔리겠죠? 그럼 팔아야 할 빵, 과자, 음료수, 아이스크림을 들여올 때 위에 있는 기준에 거의 부합되도록 가져오면 되겠네요. 팔아야 할 물건들도 정해졌으니 이제 물건들을 들여와서 정리해봅시다.
- 이 사진처럼요. 사진을 잘 보면 지각 체계화 원리가 적용되어 있습니다. 큰 박스로 된 것들은 가장 맨 위에 모여있고, 작은 박스들은 그 밑에, 그리고 가장 아래엔 봉지로 된 과자들이 모여있습니다. 음료수는 음료수끼리 냉장고에, 아이스크림은 아이스크림끼리 냉동고에 있겠죠? 정리가 잘 되어있으면 그만큼 물건을 사는 과정이 빨라지고 그 과정이 만족스러워집니다.
- 그리고 재미있는 사실은 가장 잘 팔리는 것들을 손이 닿기 쉬운 곳에 뒀다는 것입니다. 그대로 어플리케이션에 빗대어보면 자주 쓰는 기능들은 엄지 손가락이 닿기 쉬운 곳에 있어야한다는 뜻이 돼죠. 이렇게 학생들을 고려해서 정리도 다 했으니 이제 잘 팔면 되겠네요. 우리는 매점의 아주 기초적인 UX 디자인을 끝냈습니다.
- 지금까지 UX 디자인을 이해하기 쉽게! 매점이야기로 했습니다. 우리는 학생이라는 타겟을 정하고, 좋은 매점의 위치를 선정하고, 학생들의 니즈를 파악하여 원하는 물건을 들여와서 정리했습니다. 개발도 똑같습니다. 타겟을 정하고, 쓰기 쉽게 설계하고, 니즈를 파악하여 원하는 기능을 넣습니다. 이렇듯 UX 디자인은 우리 근처에 있습니다. 평소 주변 물건들을 보며 “왜?”라는 질문들을 해보세요. “왜 연필의 끝에 지우개가 달려있을까?”처럼요. 이렇게 만든 이유를 역추적해서 생각해보면 되게 많은 것들을 생각하게 되는데 그 과정에서 분명 느끼는 것들이 많을 것입니다. UX 디자인에 관련해서요. 그럼 분명 개발을 하게 되던, 디자인을 하게 되던지간에 사용자를 이해하는 데에 큰 도움이 됩니다.
- 제가 준비한 발표는 여기까지입니다. 감사합니다.