brunch

You can make anything
by writing

C.S.Lewis

by Newtudy Sep 07. 2022

모바일 화면 빈 공간 활용하기

모바일의 공간 방치하지 않기

본 글은 닐슨 노먼 그룹의 <Utilize Available Screen Space>를 바탕으로 구성했습니다.



화면 공간은 방치하지 않고 사용해야 합니다. 매우 가치 있는 콘텐츠나 아이템을 작은 공간에 집어넣으면서 화면 공간을 낭비하는 디자인을 흔하게 볼 수 있습니다.



ABC News iPad 앱

홈 화면

처음에 사용자는 제스처를 사용하여 회전할 수 있고, 깔끔한 그래픽과 초기 상호작용이 매력적이다. 멋지고 재미있다. 눈을 사로잡는다 등 긍정적인 반응을 보였습니다.

이러한 긍정적인 초기 반응에도 불구하고 사용자는 화면이 마음에 들지 않아 기본 화면으로 표준적인 뉴스 목록을 보기 시작했습니다.










ABC News iPad 앱

더 많은 뉴스가 있는 대체 홈 화면

규칙적이고 약간 지루한 이 화면을 선호하는 이유는 공간을 활용해 뉴스를 한눈에 보여주기 때문입니다.

(정보 밀도가 너무 높지 않도록, 너무 많은 정보로 화면을 가득 채우지 않도록 해야 합니다.)













두 화면에서 알 수 있는 것은, 사용 가능한 화면의 공간을 낭비하지 않고 효율적으로 사용해야 한다는 점입니다.



스타벅스 어플 리뉴얼 전(왼쪽)과 후(오른쪽)

모바일 장치와 태블릿은 본질적으로 작기 때문에 화면 공간 사용을 최적화하고 가능한 한 콘텐츠들을 크게 표시할 때 더 나은 사용자 경험을 얻을 수 있습니다. 사용자 인터페이스에서 클수록 좋다는 규칙에 대한 예외는 거의 없습니다.


그러므로 정보를 작게 넣는 것을 주의합시다. 사용 가능한 화면 공간에 맞게 UI를 최적화하는 것은 사용성을 개선하여 전환율을 높이는 핵심 전략입니다.


작성자: 박상희
스타벅스의 사례에서 스크롤을 하지 않아도 항목들을 많이 볼 수 있는 전자와 같은 화면이 더 효율적이지 않나 생각했는데, 정보 밀도가 높고 너무 많은 정보가 한 화면에 나열되면 사용성이 떨어진다는 것을 알게 되었다. 어떤 콘텐츠를, 어떤 경험을 제공할 것인지와 더불어 그것을 어떤 방식으로 어떤 인터페이스로 전달해야 사용성이 좋은지에 대한 고민도 치열하게 필요하다고 생각했다.




<관련 글>


작가의 이전글 섬네일 이미지 구성하는 방법(UI)
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari