좋은 웹사이트는 사용자가 공부하게 만들지 않습니다

전문적인 정보일수록, 전달하는 방법이 중요합니다

바이오 기업의 웹사이트에는 일반적인 기업 사이트보다 전문적인 정보가 많이 담깁니다.

MxT Biotech는 미세유체기기를 활용한 암 면역 세포치료제를 개발하는 바이오 벤처 기업으로, 제약회사와 연구소, 학교 등을 주요 대상으로 합니다.

그렇다면 이런 전문적인 정보를 웹사이트에서는 어떻게 보여줘야 할까요?

기술 용어와 연구 내용을 그대로 나열하는 것만으로는 사용자가 기업을 쉽게 이해하기 어렵습니다. 정보를 정확하게 전달하는 것과 정보를 쉽게 이해하도록 만드는 것은 다르기 때문입니다.

좋은 웹사이트는 사용자가 정보를 하나씩 공부하도록 기다리지 않습니다. 사용자가 무엇을 먼저 보고, 어떤 내용을 확인하고, 다음에는 어디로 이동할지를 먼저 고민합니다.

MxT Biotech의 웹디자인 역시 이러한 사용자 경험을 만드는 것에서 출발했습니다.

사용자가 정보를 찾는 순서부터 설계합니다

전문적인 정보를 쉽게 전달하기 위해서는 화면을 디자인하기 전에 정보의 흐름을 먼저 정리해야 합니다.

사용자가 처음 웹사이트에 들어왔을 때 기업을 이해하고, 관심이 생긴 이후 기술과 연구 내용을 더 자세히 살펴볼 수 있도록 페이지의 구조와 콘텐츠 간 연결을 구성했습니다.

이를 위해 와이어프레임과 플로우 차트를 바탕으로 각 페이지의 역할과 정보의 우선순위를 정리하고 UX/UI를 설계했습니다.

중요한 것은 정보를 줄이는 것이 아니라 사용자가 정보를 받아들이는 순서를 정리하는 것입니다.

사용자가 필요한 내용을 찾기 위해 여러 페이지를 헤매지 않고 자연스럽게 다음 정보로 이동할 수 있도록 흐름을 만드는 것이죠.

화면의 흐름이 자연스럽다면, 정보도 더 쉽게 들어옵니다

웹사이트를 이용하는 사용자는 모든 내용을 처음부터 끝까지 읽지 않습니다.

먼저 눈에 들어오는 정보를 확인하고, 필요한 내용을 선택하고, 더 궁금한 부분이 생기면 다음 페이지로 이동합니다.

그래서 UX/UI에서는 각각의 화면을 만드는 것만큼 화면과 화면 사이의 연결을 설계하는 것이 중요합니다.

MxT Biotech 웹사이트에서도 기업 정보와 연구 관련 콘텐츠를 목적에 따라 구성하고, 사용자가 관심 있는 정보를 자연스럽게 탐색할 수 있도록 화면을 설계했습니다.

결국 UX는 사용자가 더 많은 정보를 보게 만드는 것이 아니라, 필요한 정보를 찾는 데 드는 수고를 줄이는 것에 가깝습니다.

사용자가 보는 화면에는 하나의 기준이 필요합니다

정보의 흐름을 잘 만들었다면, 그 흐름을 사용자가 자연스럽게 따라갈 수 있도록 화면의 시각적 기준도 필요합니다.

페이지마다 다른 분위기와 시각적 기준이 사용된다면 사용자는 콘텐츠뿐 아니라 화면의 규칙까지 새롭게 이해해야 합니다.

MxT Biotech는 이러한 혼란을 줄이기 위해 브랜드의 시각적 기준을 먼저 정리했습니다.

DNA의 유기적인 라인에 M, X, T를 결합한 로고를 통해 미세유체 기술과 브랜드의 연결성을 표현하고, 이를 웹사이트에서도 일관되게 경험할 수 있도록 시각적 요소를 확장했습니다.

브랜드 아이덴티티는 웹사이트를 꾸미는 요소가 아니라, 사용자가 여러 화면을 하나의 브랜드 경험으로 이해하도록 만드는 기준이 됩니다.

색상도 정보를 이해하는 데 영향을 줍니다

웹사이트에는 텍스트, 이미지, 버튼, 메뉴처럼 서로 다른 역할을 가진 요소들이 함께 존재합니다.

이때 색상에 대한 기준이 없다면 어떤 요소가 중요한지 한눈에 파악하기 어려워질 수 있습니다.

그래서 MxT Biotech의 컬러 시스템을 구축하고 이를 웹 UI에 적용했습니다.

브랜드 컬러를 일관되게 사용하면서 화면의 위계와 콘텐츠의 구분을 명확하게 하고, 정보가 많아져도 사용자가 화면의 구조를 자연스럽게 파악할 수 있도록 했습니다.

결국 컬러 역시 단순한 장식이 아니라 사용자가 정보를 받아들이는 방식을 돕는 하나의 시각적 기준이 될 수 있습니다.

웹사이트 밖에서도 같은 인상이 이어져야 합니다

사용자가 웹사이트에서 경험한 브랜드의 인상은 웹사이트 밖에서도 이어져야 합니다.

명함이나 인쇄물처럼 다른 브랜드 접점을 만났을 때 전혀 다른 이미지가 나타난다면, 사용자는 브랜드를 하나의 일관된 경험으로 기억하기 어렵습니다.

그래서 로고와 컬러의 활용 기준을 정하고 다양한 환경에서도 동일한 시각적 언어가 유지될 수 있도록 브랜드 시스템을 구성했습니다.

결국 좋은 웹사이트는 사용자의 수고를 줄입니다

전문적인 기업일수록 많은 정보를 보여줘야 한다고 생각하기 쉽습니다.

하지만 정보가 많아질수록 중요한 것은 얼마나 많이 보여주는가가 아니라, 얼마나 쉽게 이해할 수 있게 보여주는가입니다.

MxT Biotech의 웹디자인은 전문적인 기술을 단순하게 만드는 대신, 사용자가 필요한 정보를 자연스럽게 찾아가고 이해할 수 있도록 그 과정을 설계했습니다.

와이어프레임과 플로우 차트로 정보의 순서를 정리하고, UX/UI를 통해 그 흐름을 화면으로 구현했습니다. 그리고 로고와 컬러 시스템을 통해 각 화면과 브랜드 접점이 하나의 인상으로 이어지도록 했습니다.

그래서 좋은 웹사이트를 경험한 사용자는 “많은 것을 설명해줬다”보다 “생각보다 쉽게 이해했다”는 인상을 받게 됩니다.

사용자가 웹사이트를 이해하기 위해 공부하는 것이 아니라, 웹사이트가 사용자가 이해하기 위해 필요한 과정을 먼저 고민하는 것.

좋은 UX/UI는 결국 사용자의 수고를 줄이는 디자인입니다.