여백에 양보하지 마세요.(모바일 UI)
공간을 최대로 활용하는 모바일 디자인
본 글은 닐슨 노먼 그룹의 <Optimizing a Screen for Mobile Use>를 바탕으로 구성했습니다.
매우 예전 사례이므로 가볍게 참고하시면 좋겠습니다.
닐슨 박사는 웹 사용성과 관련하여 몇 개의 조사를 실시했습니다. 그중에서도 모바일 사용 편의성이나 소셜 사용자 인터페이스와 같은 문제와 관련하여 allkpop.com이라는 사이트를 알아보았습니다.
모바일 사용에 완벽한 작업인 연예인 가십을 지원한다.
모바일 시나리오에서는 다른 많은 태스크가 의미가 없습니다. 아무리 훌륭한 디자인이라도 모바일 버전은 그다지 유용하지 않으며, 그것을 만드는 것은 시간 낭비라고 생각했습니다.
그럼에도 중요한 것은 모바일 버전이 따로 있다는 것입니다.
데스크톱 컴퓨터와 모바일 디바이스는 매우 다르기 때문에 뛰어난 사용자 경험을 제공하는 유일한 방법은 두 가지 디자인을 만드는 것입니다. 일반적으로 모바일용 기능은 거의 없습니다.
서버는 모바일 디바이스와 데스크톱 디바이스 중 어느 쪽을 사용하고 있는지 자동으로 인식하기 때문에 사용자가 수동으로 버전을 선택할 필요가 없습니다.
테스트에서 알 수 있듯이 모바일 사이트와 풀 사이트의 URL이 다르면 사용자가 잘못된 사용자 인터페이스를 사용하게 되는 경우가 많기 때문에 사용 편의성이 크게 떨어집니다.
각 헤드라인의 터치 타깃은 상당히 큽니다.
콘텐츠를 전달하는 키워드는 보통 헤드라인의 선두에 표시됩니다. 이 사이트의 경우 팝스타의 이름이 사용자에게 가장 중요한 정보이며 일반적으로 가장 먼저 표시됩니다.
단, 이 사이트는 모바일 사용성에 관한 가이드라인 ( https://www.nngroup.com/reports/mobile-website-and-application-usability/ )을 모두 따르는 것은 아니기 때문에 다음과 같은 기능을 갖춘 대체 설계를 작성하기로 결정했습니다.
이 디자인은 총 10가지의 수정을 거쳤습니다.
기능이 적습니다. (다음 3가지 요소를 제거함으로써 실현)
》기사를 선택할 필요가 없음 (제1면에 헤드라인을 게재하는 것이 포인트)
》선택할 수 있는 카테고리와 태그 (쓸모없어 보이는 음악 등의 카테고리 제거)
》요약이 표시되는 삼각형 버튼(항상 요약이 표시)
더 큰 터치 화면. 스토리 타일 전체를 Tab할 수 있게 되어 헤드라인 자체를 Tab하는 정밀도가 더 이상 필요하지 않게 되었습니다. (탭 가능이 작은 영역은 사용성이 좋지 않음)
잘린 헤드라인 대신 전체 헤드라인. 이것은 아마도 가장 큰 재설계 개선일 것입니다. 왜냐하면 전체 헤드라인은 실제 사이트에서 볼 수 있는 몇 개의 단어보다 훨씬 더 강한 정보를 제공하기 때문입니다.
헤드라인에서 각 팝스타의 이름을 강조 표시하여 스캔 기능을 강화합니다.
각 제목 아래에 단편 요약을 표시함으로써 더 많은 정보를 얻을 수 있습니다.
날짜 아이콘 대신 팝스타 사진 사용. 이것은 시각적인 흥미를 더해줄 뿐만 아니라, 많은 사용자들이 그들이 좋아하는 스타의 얼굴을 헤드라인을 읽을 수 있는 것보다 더 빨리 인식하기 때문에 스캔 가능성과 정보 향을 더욱 향상합니다.
스크롤 없이 4개의 풀 스토어 타일을 넣을 수 있는 공간. 간격이 약간 좁기 때문에 사용자는 페이지를 처음 스캔할 때 전체 4가지 스토리 요약을 볼 수 있습니다. 더 적은 공간에서 더 많은 타일을 볼 수 있기에 효율성이 좋습니다. 이 두 번째 장점은 비교적 작기 때문에 첫 번째 화면에 더 많은 스토리를 표시하기 위해 타일을 작게 만드는 것을 고려했습니다.
다른 날짜에 출판된 스토리의 구분자로만 출판 날짜를 표시합니다. 매일 너무 많은 이야기가 게시되기 때문에 사용자들은 어제의 뉴스에 도달할 수 있을 만큼 아래로 스크롤하지 않는 한 사이트에 접속할 때 보통 현재 날짜만 볼 수 있습니다. 동일한 정보를 여러 번 반복하는 모바일 설계에 의문을 제기하는 것이 좋습니다.
내비게이션 바의 두 옵션 사이에 공간을 추가하여 사용자가 잘못된 옵션을 터치할 가능성을 낮춥니다.
드롭다운 메뉴를 단순히 삼각형으로 표시하지 않고 레이블을 지정. (원래 디자인에서는 검색 바로 위에 있습니다. 사용자는 대부분 간과하고 있는 미묘한 프레젠테이션입니다.)
디자인이 예쁘다는 생각은 안 들지만 오랜 시간이 지났는데도 현재 디자인 구조와 크게 다르지 않다는 것이 신기하기도 합니다.
비교적 최근에 리뉴얼된 모습
최근에 디자인했음에도 공간 활용을 잘하지 못한 모습
공간을 다양하게 잘 활용했다고 생각하는 사례작성자: 신다혜
평상시에 익숙하게 보고 있는 화면에 대해서 계속 의구심을 가지고 보아야겠다고 다짐했다. 사소하지만 작은 변화들이 사용성에 큰 영향을 준다는 것을 알게 되었고 다른 사이트를 보면서 같은 문제를 어떤 방식으로 풀어나갔는지 깊이 있게 봐야겠다.
<관련 글>
