디자인을 할 때의 기본적인 부분이라고 할 수 있지만, 잘 분류해서 정리된 글이라 번역을 해본다.
사실 아래 글의 내용대로 하는 것이 필요하고 좋다는 것을 잘 알지만 현실적으로 하기 어려운 점이 많다. 그래서 여러 가지 도구나 소프트웨어들이 나오는데, 나중에 그런 것들에 대해서도 한번 알아보면 좋을 듯 하다.
——————————————————————————————
Deconstructing Fidelity
Fidelity is the degree of exactness to which a model reproduces the real thing. How much fidelity is enough? The greater the fidelity, the more likely it is that someone will understand your design intent. The more real something looks and feels, the more likely it is that you’ll receive actionable feedback to validate your design or inform your next iteration. Theoretically, one could gradually increase the fidelity of a model until it’s indistinguishable from the actual product. However, that’s not a practical approach in most situations.
Fidelity는 실제 대상을 재현하는 모델이 얼마나 정확한지에 대한 수준을 말한다. 어느 정도의 Fidelity가 적당할까? Fidelity가 높으면 어떤 사람이 당신의 디자인 의도를 더 잘 이해할 수 있을 것이다. 실제 대상과 더 비슷한 모양과 느낌일 수록 당신의 디자인에 대해서 검증받거나 다음 단계에 대한 단서를 얻을 수 있는 피드백을 받을 수 있을 것이다. 이론적으로 실제 제품과 구분하기 힘들 정도의 모델을 만들 때까지 Fidelity는 증가할 수 있다. 하지만 이런 방법은 실질적으로 대부분의 상황에서 적용하기 힘든 것이다.
In the field of UX, the term low fidelity is often applied to site maps, screen flow diagrams, wireframes, and paper prototypes. These models help designers explore and gather feedback about how information within a digital product might be structured and how that product might respond to interactions from users and the system at large. While some aspects of a product’s form may begin to take shape with low-fidelity models, it is not their primary intent.
UX의 영역에서 site map, screen flow diagram, wireframe 그리고 paper prototype은 낮은 Fidelity를 가지고 있다. 이런 모델들은 디자이너에게 디지털 제품(앱/웹사이트 등)이 어떤 정보 구조를 가지게 될 지, 사용자와 시스템 레벨의 상호작용에 어떻게 반응하게 될 것인지에 대한 이해를 얻도록 도와준다. 최종 제품의 어떤 부분들은 이런 낮은 Fidelity 모델들에 의해 형태가 갖춰지기 시작하겠지만, 그것은 이 모델들이 의도하는 바는 아니다.
The term high fidelity is more commonly used in conjunction with UX models that articulate a product’s form or aesthetics. Screen layouts, style guides, and other visual design specification documents fit into this bucket. This suggests that low-fidelity deliverables address the product’s function while high-fidelity deliverables focus on form.
Screen layouts, Style guide, Visual design spec. 문서와 같이 높은 Fidelity를 가진 UX 모델들은 제품의 형태나 심미적 부분을 보여준다. 즉, 낮은 Fidelity의 UX 산출물들은 제품의 기능을 정의하지만 높은 Fidelity의 산출물들은 결과물의 형태에 집중한다.
However, many of the UX deliverables outlined above can actually be executed at various levels of fidelity. Let’s use wireframes to illustrate the point. Loose, hand-sketched wireframes can quickly but completely capture page-level content hierarchy and navigational elements. Many people would call this low fidelity. By contrast, wireframes with pixel precision and brand-appropriate elements such as color and typography may communicate the visual layout of information. Most people would call these high fidelity. But what if these high-fidelity wireframes lack any definition around what content—text or images—should be included on the page? And what if it’s not clear where a particular page exists inside of the website’s overall structure or how users will navigate to other pages? This doesn’t sound like a model that accurately reproduces the final product, so it can’t be high fidelity, can it?
하지만 위에서 나열한 많은 UX 산출물들이 실제로는 다양한 수준의 Fidelity에서 실행될 수 있다. 요점을 정리할 수 있도록 wireframe을 이용해보자. 간단하고 손으로 그린 wireframe은 페이지별 콘텐츠의 위계와 내비게이션 요소들을 완전하면서도 빠르게 파악할 수 있게 해준다. 많은 사람들은 이것은 낮은 Fidelity라고 한다.
대조적으로, 픽셀 수준의 정확도와 색상, 서체 등의 브랜드 요소까지 적용한 wireframe은 정보의 시각적인 레이아웃을 보여줄 수 있다. 많은 사람들은 아마 이것은 높은 Fidelity를 가졌다고 할 것이다. 그러나 이런 높은 Fidelity를 가진 wireframe이 실제로 페이지 안에 어떤 콘텐츠-텍스트/이미지-가 포함되어야 하는지에 대한 아무런 정보가 없다면 어떨까? 또한 특정 페이지가 전체 웹사이트의 구조 안에 존재하는 여부가 확실치 않거나 사용자가 어떻게 다른 페이지들로 이동할 수 있는지 알 수 없다면? 그렇다면 그것은 최종 제품의 정확하게 재현한 모델이라고 할 수 없으며 따라서 높은 Fidelity를 가지고 있지 않은 것이다.
Fidelity Comes in Different Types
Many people think of aesthetics alone when describing the fidelity of an object. Humans are highly visual creatures, so this isn’t surprising. In Hacking UX,” Austin Govella suggests a better framework for fidelity. Instead of a single spectrum that is often confused with aesthetic precision, let’s consider the following four types of fidelity:
많은 사람들이 대상의 Fidelity를 설명할 때 눈에 보이는 시각적인 디자인만 생각한다. 인간은 시각에 크게 의존하기 때문에 이것은 놀랄만한 일은 아니다. Hacking UX에서 Austin Govella는 Fidelity를 위한 더 나은 framework를 제안했다. 눈에 보이는 외적인 디자인 대신 다음의 4가지 타입의 Fidelity를 생각해보자.
Contextual
Contextual fidelity measures how closely a model simulates the scenario of actual product use. To illustrate, let’s consider two hypothetical products that share some key user interface attributes, such as physical dimensions, resolution, and touch screen technology. Product A is an iPad app used by auto insurance agents to estimate the cost of repairing a vehicle damaged in an accident. Product B is a medical device with an embedded display used by anesthesiologists to quickly prepare patients for an emergency surgical procedure. The settings and circumstances are very different and define the products’ respective contexts. Ignoring these factors would be equivalent to designing in a vacuum.
Contextual Fidelity는 모델이 실제 제품의 사용 시나리오를 얼마나 잘 시뮬레이션 했는지를 측정한다. 물리적 공간과 해상도, 터치 스크린 등 몇 가지 중요한 UI 요소들이 같은 2개의 제품을 가정해보자. 제품 A는 자동차 보험 상담사가 자동차 사고를 당한 차량의 복구 비용을 측정하는 iPad App이다. 제품 B는 마취과 의사가 환자의 응급 수술을 빠르게 준비하기 위해 사용하는 장치로서 디스플레이를 내장하고 있다. 이 두 제품의 설정과 환경은 너무나 다르고 각자의 context를 정의하고 있다. 이런 요소들을 무시한다면 아무 것도 없는 진공 속에서 디자인을 하는 것과 같다.
Throughout the design process, consider whether your models demonstrate an appropriate level of contextual fidelity. Are you presenting an iOS app on a 60-inch television when an iPad would be more realistic? Is the embedded medical device interface presented on posters in a hotel conference room or on paper adhered to a physical device model in a simulated emergency room environment? You won’t always have the opportunity to demonstrate high contextual fidelity, but assessing it can help you better understand the setting and circumstances of product use.
전반적인 디자인 프로세스에서 당신의 UX 모델이 적절한 수준의 contextual fidelity를 구현하고 있는지 검토해야 한다. 아마 높은 contextual fidelity를 구현할 수 있는 기회가 늘 있지는 않을 것이다. 하지만 contextual fidelity를 항상 고려한다면 제품이 사용되는 설정과 환경을 더 잘 이해할 수 있을 것이다.
Content
Content fidelity is how accurately the information included in a model matches the final product. Many designers use placeholder content in their early-stage UX deliverables. I’ve done this myself. However, I question whether there is any value in doing so. How will you determine if users comprehend what’s being communicated in a design without representative content? What happens when a user selects that button labeled Lorem ipsum? Do you really need five images on that page or would fewer suffice? A better approach would be to use whatever draft copy and visual assets you can get your hands on. If this sample content doesn’t exist, ask someone to provide it or create it yourself. It can always be changed later.
Content fidelity는 모델이 내포한 정보가 최종 제품과 얼마나 일치하느냐 하는 것이다. 많은 디자이너가 초기 단계의 UX 산출물에는 임의의 콘텐츠를 사용한다. 나 자신도 그래왔다. 하지만 나는 그렇게 하는 것에 어떤 가치가 있는지 의문스럽다. 당신은 사용자들이 과연 핵심 콘텐츠가 없는 디자인으로 무엇을 이해했는지 결정할 수 있는가? 사용자가 Lorem ipsum으로 표시된 버튼을 선택하면 어떻게 하겠는가? 당신이 현재 가지고 있는 자료와 이미지라도 모델에 넣는 것이 더 나은 방법이다. 만약 샘플 콘텐츠가 전혀 없다면 누군가에게 요청하거나 스스로 만들어라. 샘플 콘텐츠는 언제든지 교체할 수 있다.
Behavioral
Behavioral fidelity is how closely a model reproduces the functionality of the final product. Much of a digital product’s behavior is ultimately expressed via software, making it somewhat challenging for designers to articulate how a product might behave. However, it can be partially achieved using tools like screen flows, annotated wireframes, user stories, and clickable prototypes.
Behavioral fidelity는 최종 제품의 기능성을 얼마나 잘 재현했는지에 대한 것이다. 많은 디지털 제품의 행동은 결국 소프트웨어를 통해 나타나고, 디자이너로 하여금 제품이 어떻게 움직일 것인지 표현하는데 어느 정도 어려움을 겪게 된다. 하지만 Behavioral fidelity는 screen flow, 주석이 달린 wireframe, 사용자 시나리오나 조작 가능한 프로토타입 등을 통해 어느 정도 달성할 수 있다.
If you work with a software development team, this represents a great opportunity to include them in the design process. If you don’t work with a development team, there are many free or cheap tools available to turn your sketches or static images into a limited-functionality prototype. And don’t forget that the form of an interface element can also contribute to a user’s perception of how it will behave. If the user can interact with an element, be sure to communicate its desired sensory characteristics. Using established design patterns, where available, can quickly increase behavioral fidelity and ensure a shared understanding of behavior.
소프트웨어 개발팀과 함께 일하고 있다면 그들을 디자인 프로세스에 참여시킬 수 있는 좋은 기회가 된다. 그렇지 않다면 많은 공짜 또는 저렴한 도구들을 이용해서 어느 정도 기능을 갖춘 프로토타입을 만들 수 있다. 그리고 인터페이스 요소들의 형태는 사용자들이 그것이 어떻게 동작할 지에 대한 인식에 영향을 줄 수 있음을 기억해라. 사용자들이 프로토타입의 요소를 조작할 수 있다면 그로부터 오는 감각적인 특징들을 이해하도록 해라. 가능하다면 디자인 패턴들을 이용해서 behavioral fidelity를 빠르게 확보할 수 있고 제품의 동작에 대해서 공유된 이해를 확보할 수 있다.
Visual
Visual fidelity measures how closely a model’s form mirrors the final product. When working in low visual fidelity, one might quickly explore potential visual design approaches using tools like mood boards and style tiles. If visual design is someone else’s gig, ask them to apply some degree of visual styling to early prototypes. This will help you test how aesthetics impact usability, brand recognition, and overall user satisfaction. As the need for new information or functionality arises, try to maintain visual consistency at whatever level of fidelity is appropriate.
Visual fidelity는 최종 제품의 형태를 모델이 얼마나 잘 보여주는지에 대한 것이다. 낮은 visual fidelity에서 작업하게 되면 무드 보드와 같은 시각적 디자인 방법들을 활용할 수 있다. 만약 시각 디자인이 다른 사람의 업무라면 초기 프로토타입을 위해 어느 정도의 시각화를 요청해야 한다. 이로서 시각적인 미적 요소들이 사용성과 브랜드의 인식, 전체적인 사용자 만족도에 미치는 영향을 테스트할 수 있다. 새로운 정보나 기능이 요구될 때에는 어떤 수준의 visual fidelity가 필요하든 시각적 통일성을 유지하도록 해야 한다.
Whatever you do, don’t wait until the end of a UX project to apply the product’s form. Instead, make a plan to gradually increase visual fidelity as you go and accept that it will evolve with time and iteration, just like every other aspect of the product.
어떻게 하든 제품의 형태를 모델에 적용하기 위해 프로젝트의 마지막까지 기다리지 말아라. Visual fidelity를 끌어올리기 위한 방안을 세우고, 제품의 다른 부분들처럼 시간과 반복에 의해 개선될 것이라는 것을 받아들여야 한다.
Conclusion
Try using the four types of fidelity on your next UX project. I suspect it will help you assess how much detail is needed and where it’s needed. It may also inform a more methodical approach to increasing fidelity through design iteration that ultimately improves others’ understanding of your design intent.
당신의 UX 프로젝트에 위의 4가지 fidelity를 적용해보라. 그러면 얼마나 디테일이 필요한지, 어디에 필요한지 아는데 도움이 될 것이다. 또한 당신의 디자인 의도에 대해서 다른 사람들의 이해를 잘 할 수 있게 fidelity를 올리기 위한 방법론적인 접근에 대해서 알게 될 것이다.