F-패턴이 말하는 것: 해외 UX 연구로 본 병원 홈페이지 디자인

사람은 웹페이지를 '읽지' 않고 '훑는다'

닐슨 노먼 그룹(Nielsen Norman Group)의 아이트래킹 연구는 사용자가 웹페이지를 왼쪽 위에서 시작해 가로로 두 번, 세로로 한 번 훑는 F자 형태의 시선 패턴을 보인다는 것을 보여줬습니다. 이 연구가 처음 공개된 뒤 지금까지, 첫 화면 상단과 각 문단의 첫 단어가 가장 많이 읽힌다는 결론은 크게 달라지지 않았습니다.

병원 홈페이지 디자인에 적용하면 이렇게 됩니다. 환자가 가장 먼저 확인하는 정보(어떤 진료를 하는 병원인지, 어디에 있는지, 지금 예약·상담이 되는지)를 F의 첫 가로줄, 즉 첫 화면 상단 왼쪽에 놓아야 합니다.

아름다움과 훑어읽기는 충돌하지 않는다

메인 영상과 큰 타이포그래피를 쓰는 병원 홈페이지가 늘고 있습니다. 그 자체는 문제가 아닙니다. 문제는 영상 위에 정보가 없는 경우입니다. 저희가 참고하는 해외 스튜디오들의 어워드 수상작들도 첫 화면에 반드시 '무엇을 하는 곳인지'를 한 문장으로 박아 둡니다.

저희 포트폴리오의 병원들도 같은 원칙으로 만듭니다. 첫 화면에서 병원의 정체와 연락 동선을 왼쪽 상단 축에 두고, 무드는 영상과 타이포로 냅니다. 훑어읽기 동선과 브랜드 무드를 분리해 설계하면 둘 다 가질 수 있습니다.

F-패턴을 병원 페이지에 적용하는 체크 세 가지

첫째, 각 페이지의 첫 문단 첫 단어에 그 페이지의 핵심(진료명·지역·행동)을 놓습니다. 둘째, 소제목만 읽어도 페이지 전체 내용이 이어지게 씁니다. 셋째, 본문 오른쪽 끝에만 있는 중요한 정보를 없앱니다. F-패턴에서 오른쪽 아래는 가장 적게 읽히는 영역입니다.

참고 자료

• Nielsen Norman Group — F-Shaped Pattern For Reading Web Content ↗