인터렉션 디자인과 유저 빌러티란?
쓰면서 정리하는 UX 디자인 공부
What is Interaction Design?
이미지 출처: https://blog.prototypr.io/the-difference-between-ui-and-ux-design-f229 efd19 bdcInteraction design is an important component under the giant umbrella of UX design.
>> 인터렉션 디자인은 UX 디자인 영역 아래에 있는 중요한 디자인 요소이다.
Interaction design can be understood in simple-but not simplified-terms as "the design of the interaction between users and products."
>>인터렉션 디자인은 사용사와 제품 사이의 상호작용 디자인이다.
Most often, when people talk about interaction design, they talk about software products like apps or websites. The goal of interaction design is to create products that enable the users to achieve their objectives in the best way possible.
>> 인터렉션 디자인의 목표는 사용자가 그들의 목표를 가장 좋은 방법으로 달성할 수 있는 제품을 만드는 것이다. 인터렉션 디자인 필드가 브로드 하기 때문에 개념 자체가 브로드하게 느껴질 수 있다.
The interaction between a user and a product often involves elements like aesthetics, motion, sound, space and many more. Each of these elements can involve even more specialized fields like sound design-for the crafting of sounds used in user interactions.
>> 사용자와 제품 사이의 인터렉션(상호작용)은 여러 요소-심미적, 모션, 소리, 공간 등등-를 포함한다. 각 요소들은 세부적인 전문 분야를 포함할 수 있다.
이미지출처: https://www.fastcompany.com/1671735/infographic-the-intricate-anatomy-of-ux-designThere is a huge overlap between interaction design and UX design. After all, UX design is about shaping the experience of using a product and the most part of that experience involves some interaction between the user and the product.
>> UX 디자인과 인터렉션 디자인은 겹쳐 있다. UX 디자인은 상품을 사용하는 경험을 포함하고 대부분의 경험들은 사용자와 제품 사이의 상호작용을 포함한다.
But UX design is more than interaction design. It also involves figuring out which experiences will be the most "relevant' for your users, the best way of creating them, and the best way of validating the design. For that, you also need user research, personas, user testing, and so on.
>> UX 디자인은 상호 작용 설계 이상의 것이다. 또한 사용자에게 가장 적합한 "경험", 가장 좋은 방법, 그리고 디자인 검증을 위한 최선의 방법을 파악해야 한다. 이를 위해서 디자인 리서치, 퍼소나, 사용자 테스트 등이 필요하다.
상호작용 디자인의 5가지 측면
이미지출처: https://www.interaction-design.org/literature/article/the-five-languages-or-dimensions-of-intGillian Crampton Smith first introduced the concept of 4 Dimensions of an interaction design language in the book "Designing interactions", and later, Kevin Silver, at IDEX Labs, added the fifth.
5 dimensions of interaction design
1D: Words
>> The ones we use in interactions, like the button label on the image, should be meaningful and simple to understand. They should communicate information to users, but not so much information that they overwhelm the user.
>> 이미지에 부착된 버튼과 상호작용을 할 때 이해하기 쉬워야 한다. 너무 복잡하면 안 됨.
2D: Visual representation
This concerns graphical elements like images, typography, and icons that users interact with. Icons and images usually supplement the words used to communicate information to users.
>> 누구나 다 알기 쉬운 비주얼 그래픽 요소에 관한 것. 다른 언어를 몰라도 아이콘만 보고 그 기능을 인지할 수 있어야 함.
3D: Physical objects of space
This could be things like a laptop, a mouse, a touchpad or a smartphone. It also relates to what kind of physical space the user interacts in. These factors all affect the interaction between the user and the product.
4D: Time
While this dimension might sound a little abstract, it refers to aspects of the interaction that unfold over time, such as animation, video, and sounds.
>> 시간이 지남에 따라서 펼쳐지는 상호작용 측면을 의미. 예를 들면 카톡이 오면 기본 설정에서 '카톡' 소리가 나면서 메시지 왔다는 것을 알려주거나, 페북 메신저에서 메시지를 보낼 때마다 작은 소리가 남. 이것은 유저가 상품과 상호작용을 하는 시간의 양과도 관련이 있다.
5D: Behavior
It relates to the user side of the interaction. Both in terms of how they interact with the product and how they "react" to the product. In relation to interaction, the previous dimensions come together to define how users perform actions and operate the product.
The user's reaction obviously also relates to whether you have designed the previous four dimensions to create a compelling and positive experience for the user.
>> 사용자의 반응은 이전에 4가지 요소(언어, 비주얼 표현, 물리적 매체, 시간)가 사용자에게 얼마나 설득력 있고 긍정적인 경험을 제공하는지와 관련이 있다.
How do interaction designers work with the five dimensions to create meaningful interactions?
1. What can a user do with their mouse, finger, or stylus to directly interact with the interface?
유저는 그들의 마우스, 손가락, 스타일러스로 인터페이스와 직접적으로 어떤 상호작용을 하나? (도구에 따라 다르겠지.)
>> 이 질문은 제품과 가능한 사용자 상호작용을 정의하는데 도움을 준다. 우리가 작업하고 있는 기기에 따라서 달라지는 "action possibilities"를 잘 봐야 한다.
2. What about the appearance such as color, shape, and size give the user a clue about how it functions? 색이나 모양, 자이즈와 같은 어피어런스는 유저에서 이 기능이 어떻게 작동할 것이라는 단서를 어떻게 제공하나?
>>이 질문은 사용자가 어떤 행동을 할 것인지에 대한 단서를 제공한다. (This helps us give users clues about what behaviors are possible.)
3. If your error messages provide a way for the user to correct the problem or explain why the error occurred?
>> 이 질문은 유저가 실수를 예상하거나 완화시킬 수 있게 해 준다.
4. What feedback a does user get once an action is performed?
액션이 수행되면 사용자는 어떤 피드백을 받게 되나?
>> This allows us to ensure that the system provides feedback in a reasonable time after user actions. 사용자가 액션 후 합리적인 시간에 피드백을 제공받을 수 있게 해 준다.
5. Are the interface elements a reasonable size to interact with?
인터페이스가 상호작용하기에 적당한 사이즈인가?
>> This helps us think strategically about each element used in the product.
제품에 사용된 각 요소가 전략적으로 사용되었는지를 생각하게 해 준다.
6. Are familiar or standard formats used?
>> 스탠더드 요소와 포맷은 상품을 습득력을 강화시켜주고 단순화시켜주는데 도움을 준다.
What do interaction degisners "do"?
큰 회사의 경우, UX 디자이너, 리서처, 인터렉션 디자이너 등등 각 기능이 세분화되어 있지만 스타트업 회사의 경우에는 UX 디자이너가 Design strategy와 wireframes and prototypes을 포함한 모든 역할을 해야 하기도 한다.
Design strategy-They are concerned with what the goals of the user are and what interactions are necessary to achieve these goals.
What is usability?
>> Usability(유용성)는 사용자가 작업을 쉽게 수행할 수 있는지 (사용 용이성) 그 이상의 가치이다. 단순히 사용하기 쉬운 "ease of use"만 다루는 것이 아님.
“The extent to which a product can be used by specified users to achieve specified goals, with effectiveness, efficiency, and satisfaction in a specified context of use.”
– ISO 9241 Ergonomics of Human System Interaction
Usability is the outcome of a user-centered design process.
>> 유용성(사용자 편의성)은 사용자 중심의 설계 프로세스의 결과이다. 이 과정은 지속적이고 반복적이다. 많은 개발자들이 꾸준히 앱을 업데이트하는 이유도 이것.
The 5 Characteristics of usable products
1. Effectiveness
>> 효과는 사용자가 높은 정확도로 목표를 달성할 수 있는지에 대한 여부. 실수를 줄이게 해주는 것. 사용자에게 명확하고 의미 있는 메시지를 전하는 것.
예) 온라인으로 신용카드를 결제할 때, 신용카드의 16자리만 쓸 수 있게 허용함. 사람들에게 추가 실수를 방지.
예) 내비게이션에서 길을 검색할 때 한 가지 길이 아닌 2-3가지 길은 효과적인 측면에서는 사용자에게 선택의 권한을 주기 때문에 유용하지만 효용성(efficiency) 입장에서는 전체 효율 감소.
2. Efficiency
Efficiency is all about speed. How fast can the user get the job done?
효용성은 속도에 관한 것
예) 의미 있는 단축키들, 넓은 스크린은 작업의 효용성을 높여 준다. 마우스 사용은 작업의 효용성을 높여 준다.
3. Engagement
사용자들이 제품을 즐기면서 사용할 수 있는 시스템과의 "관계성'. 많은 회사의 웹사이트가 '심미적'인 것을 강조하는 이유도 포함. '심미적'인 것은 단순히 "예쁜" 관점을 넘어서 proper layouts, readable typography, and easy of navigation 등이 모두 포함된다. 때로는 이런 요소들인 "아름다움"을 넘어서기도 한다.
예) 위키피디아의 목표는 방대한 자료를 잘 찾고, 가독성 있게 만드는 것. 심미적인 것보다는 읽고, 찾는 능력에 초점을 맞춘 웹사이트.
4. Error Tolerance
오류 허용을 얼마나 최소화하고 있는가? 오류가 나더라도 얼마나 빨리 원래대로 돌아갈 수 있는가?
5. Ease of Learning
얼마나 쉽게 배울 수 있는가?
Utility + Usability = Usefulness
When you’re designing for usability, it’s important to think about utility, too. While usability is concerned with making functions easy and pleasant to use, the utility is about providing functions that users need in the first place.
유용성을 고려하여 설계할 때는 유틸리티에 대해서도 생각하는 것이 중요하다.
유용성은 기능을 사용하기 쉽고 즐겁게 만드는 것이라면, 유틸리티는 사용자에게 기본적으로 필요한 기능을 제공하는 것이다.
References
Silver, K. (2007). What puts the Design in Interaction Design http://www.uxmatters.com/mt/archives/2007/07/what-...
Lowgren, J. (2013). Interaction Design – brief intro. In Soegaard, M. & Friis-Dam, R. (eds.) The Encyclopedia of Human-Computer Interaction, 2nd Ed.
https://www.interaction-design.org/literature/book...
Questions to consider when designing for interaction - http://www.usability.gov/what-and-why/interaction-design.html
Kolko, J. (2011). Thoughts on Interaction Design (2nd edition). Morgan Kaufmann.
Course: The Practical Guide to Usability:
https://www.interaction-design.org/courses/the-practical-guide-to-usability
Cockton, G. (2013). Usability Evaluation. In Soegaard, M. & Friis-Dam, R. (eds). The encyclopedia of Human-Computer Interaction (2nd Edition). https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/usability-evaluation
Five Simple Usability Tips (2016). https://www.interaction-design.org/literature/article/5-simple-usability-tips
When Should I Conduct Usability Testing for a Product? (2016). https://www.interaction-design.org/literature/article/when-should-i-conduct-usability-testing-for-a-product
ISO 9241 Ergonomics of Human System Interaction - https://www.iso.org/obp/ui/#!iso:std:52075:en
