brunch

You can make anything
by writing

C.S.Lewis

by 단디 Nov 12. 2020

[아티클번역] 의사를 위한 헬스케어 App. UI

건강관리는 어느 나라에서나 중요한 삶의 측면 중 하나이다. 최근 몇 년간 생명을 구하고 의료 서비스를 향상시키고 속도를 높이는 데 도움이 되는 새로운 혁신적 해결책을 찾고, 창의적인 실험을 설정하는 것에 전문가와 이해관계자들의 관심이 증가했다. 이러한 지대한 관심의 결과로, 의사와 환자에게 유용한 앱과 웹사이트들이 많이 생겨 났고, 이 분야는 여전히 활발한 진전을 보이고 있다. 생사의 문제에 실질적인 지원을 해주는 사례를 살펴 보면, 디자인의 역할은 말 그대로 필수적이라고 할 수 있다.

오늘 살펴볼 사례는 이러한 필수적인 테마에 부합하며, 의사를 위한 HealthCare App.의 디자인 개념이 무엇인지 보여준다. Tubik 디자이너 Eugene Cameel은 이러한 유형의 디지털 제품의 특수성을 탐구하면서, 의사와 환자 간의 의사소통을 쉽고 빠르게 하면서 동시에 구조화된 데이터를 저장하고 찾기 위해 빠르고 직관적인 상호작용에 집중된 솔루션을 고민했다. 그 컨셉에 대해 자세한 내용을 알아보겠다.

TASK

의사용 웹 응용 프로그램의 UI/UX 설계

PROCESS

UX 와이어프레밍

UX 와이어프레밍에 관한 최근 기사에서 언급했듯이, 이 창의적 프로세스의 초기 부분은 시각적 성능과 스타일의 측면에 접근하기 이전에 향후 기능성(future functionality)을 위한 토대를 만들어 준다. 와이어프레임 작업은 타겟 오디언스의 정의와 분석 그리고 미래 제품이 해결할 잠재적 고통에 기초한다. HealthCare App의 대상 고객은 주로 의사였으며 제품의 주요 목표는 의사들이 정기적으로 처리하는 방대한 양의 데이터의 최적화로 설정했다. 환자에 대한 모든 정보는 올바른 결정을 내리는데 필수적이기 때문에 인터페이스를 만들면 설계자는 그것을 체계적이고 명확하고 사용하기 쉽게 만드는 데 초점을 맞춘다. 직관적인 내비게이션은 기술 활용도가 낮거나 중간 수준인 사람도 앱을 사용할 수 있도록 하는 만드는 가장 중요한 우선순위이다.

기본적으로 이 앱은 의사들에게 필요할 때 데이터베이스에서 신속하게 찾을 수 있는 능력을 가진 환자에 대한 데이터를 저장하고 정리하는 기능을 제공한다. 의사는 달력에 약속을 계획하고 저장할 수 있고, 감독 대상 환자의 건강 검진 기록도 저장할 수 있다. 또한, 진단 기록, 처방된 의약품, 개인 데이터 및 복잡한 의약품 계획을 단계(stage) 표시를 하면서 저장할 수 있다. 또 다른 유용한 특징은 앱 사용자들이 지역적, 일반적 통계 및 WHO의 권고에 이르기까지 다양한 범위 수준에서 서로 다른 이슈에 대한 통계와 연구에 접근할 수 있다는 것이다.

이 앱은 화면 왼쪽에 5개의 탭이 있는 사이드바와 정보 필드 제목(캘린더, 약속 등), 현재 날짜 및 검색 필드가 포함된 헤더가 특징이며, 데이터를 빨리 찾아야 하는 경우 잘 볼 수 있고 쉽게 접근할 수 있도록 구성되어 있다.

Calendar

아래에 제시된 달력 화면의 주요 필드는 모든 약속에 대한 데이터를 월, 주, 요일의 세 가지 모드(상단 메뉴를 통해 전환)로 구성한다. 화면 오른쪽에는 특정한 날짜 정보가 제공된다. 시기 선택을 도와주는 타임라인이 왼쪽에 있고, 모든 데이터는 특정한 카드에 정리된다. 사용자는 모든 계획된 약속이나 할 일을 검토하거나, 원하는 탭을 누른 후 더 광범위한 데이터를 얻거나, 스케줄의 빈 공간에 새로운 약속을 추가할 수 있다. 미리보기에는 환자의 full name, 예정된 약속 시간, 방문 유형(긴급 Urgent, 후속 치료 Follow-up therapy 등)이 나타난다.

Appointments

특정 약속의 화면에서는 환자 목록과 함께 수평으로 스크롤할 수 있는 동적 헤드 메뉴가 표시된다. 해당 헤드 메뉴는 페이지에서 가장 중요한 인터렉티브 필드로, 데이터를 정리하기 위한 세 가지 기본 카테고리를 제시한다. 그런 다음 아래에 이름, 성별, 의사 이름, ID 번호, 주소 및 연락처 등 현재 검진 중인 환자에 대한 자세한 정보를 표시하는 탭이 표시된다.

3 basic categories to organize data

Statistics

세 번째 화면에는 의사가 케이스나 진단에 도움되는 다양한 통계가 표시된다. 헤더 아래의 탭에서 사용자는 통계 범위 카테고리를 전환하고, 필요한 데이터에 대한 특정 월 또는 연도를 설정할 수 있다.

UI Design

UI 디자인에 대해 고려해야 할 가장 중요한 이슈는 색 팔레트와 타이포그래피이다. 보시다시피 디자이너는 사이드바와 헤더 부분을 포함한 진한 파란색 배경과 대비되는 색상 팔레트를 선택했다. 이는 헤더의 하얀 바탕에 쓰여진 기본 데이터, 밝은 주황색 활성 아이콘과 깊은 대비를 만드는 효과가 있다.

반대로, 앱의 주요 운영 필드는 의료 영역 앱에서 자연스러워 보이는 흰색 배경을 사용하며, 이는 다음과 같은 몇 가지 중요한 목표 달성을 돕는다.

텍스트 기반 콘텐츠에 대한 높은 수준의 가독성과 빠른 인식을 지원하며, 이것은 특히 응급 상황의 경우 환자의 데이터를 이용한 의료 운영에 매우 중요하다.

버튼 또는 아이콘과 같은 주요 상호작용 요소에 대해 눈에 잘 띄는 대비를 일으키는 중요한 필드를 제공한다.

물리적인 종이 문서에 적힌 데이터를 연상케 하고, 이러한 작용은 일반적으로 익숙한 환경에 편리함을 느끼는 기성세대에게 이로울 수 있다.

화면에 공간과 여백을 주어 정보가 지나치게 많은 화면 구성을 방지하고, 핵심 데이터 영역에 대한 빠른 인식을 도와준다.

현재 예약 화면에는 진단, 문제, 의약품 및 복잡한 의약품 계획 등 데이터의 주요 영역이 표시된다.

달력 화면은 카드에 옅은 파스텔 색상을 사용하며, 의사나 접수 담당자가 화려한 노트를 이용해 데이터를 표시할 수 있다.

통계 화면은 눈으로 쉽게 구별할 수 있는 대비 색상의 어플라이언스를 사용하여 최소화된 방식으로 그래프와 차트를 보여준다. 모든 화면에 대해 또렷하고 읽기 쉬운 단순한 san serif 글꼴을 사용한다. 기능성에 집중한다고 하더라도, 심플하고 우아한 외관을 만드는 걸 놓칠 수 없기 때문.