모바일 환경을 위한 디자인

모바일 환경을 위한 디자인을 한다면 모바일이 사용되는 방식과 모바일 자체의 특성을 고려해야 할 것입니다. 모바일 환경을 위한 디자인을 시작할 때 도움이 될 수 있는 몇 가지 일반적인 원칙이 있지만, 사용자 연구의 필요성을 대체하지는 않는다는 사실을 잊지 마시길 바랍니다. 이 원칙들은 어렵고 빠른 규칙이 아닌 지침입니다. 

모바일 환경을 위한 디자인을 할 때 표준 UX 사항들과 함께 고려해야 할 사항이 많이 있습니다; 모바일에 특화된 디자인을 고려해 봐야 할 사항도 있습니다. 모바일 제품을 현재 제품과 통합할 예정인가요? 필요한 경우 반응형 디자인 또는 적응형 디자인을 사용할 건가요?

맥락context이 많은 고려점의 핵심이 될 것입니다. 예를 들어 모바일 기기가 사용될 문맥을 보자면, 사용자가 자기 책상에서 모바일 웹에 접속할 수 있다면 멋진 일이겠지만 대다수가 그렇지 않습니다. 그들은 슈퍼마켓에서, 출퇴근길이나 커피숍 가는 길에 사용하려고 합니다. 

즉, 사용자의 주의가 분산되는 것을 줄이고, 손쉽게 작업에 집중할 수 있도록 하는 방법을 고려해야 한다는 것을 의미합니다. 

'아이폰 앱 디자인 정석(Tapworthy : Great iPhone Apps)'의 저자 조쉬 클락Josh Clark은 모바일 웹 접속을 위한 세 가지 범주를 제공합니다:

- 마이크로 태스킹Microtasking: 사용자가 짧지만 열심히 활동 기간 동안 기기와 상호작용할 때

- 지역Local: 사용자가 주변에서 무슨 일이 일어나고 있는지 알고 싶을 때

- 지루함Bored: 사용자가 더는 잘 할 수 없고, 재미난걸 찾거나, 다른 방향으로 전환하려고 할 때

모바일 웹을 위한 기본 디자인 고려사항

작은 화면

모바일 기기를 화면 공간은 PC와 랩탑처럼 충분하지 않습니다. 즉, 일반적으로 여러 화면 크기로 디자인하게 됩니다. 반응형 디자인responsive design(기기가 디스플레이의 변경 사항을 처리하는 경우) 또는 적응형 디자인adaptive design(서버가 변경 사항을 처리하는 경우)을 사용할지 여부를 조기에 결정할 필요가 있습니다. 

가장 작은 모바일 플랫폼을 위한 디자인을 우선 진행하고 점차 복잡성을 키워가는 "모바일 우선주의mobile first"로 접근 방식에 중점을 두어야 합니다.

다음 과정을 따라가보면 좋을 것 같습니다:

- 유사한 화면 크기를 기반으로 기기 유형을 그룹화하고 이를 관리 가능한 수의 그룹으로 유지하기

- 각 기기 그룹에 정보를 잘 표시 할 수 있도록 콘텐츠 규칙 및 디자인 적용 규칙을 정의하기

- 유연한 레이아웃을 구현할 때 가능한 한 웹 표준(W3)을 철저히 준수하기

모바일 웹과 더 넓은 인터넷에서 사용할 수 있는 다양한 브라우저 유형이 있다는 것을 잊지 마세요. 블랙베리 및 노키아 웹킷과 같이 현재는 더 이상 지원되지 않는 것을 포함하여 최대한 많은 것을 지원해야 합니다. 

내비게이션은 단순함을 유지

키패드와 터치 스크린은 마우스처럼 정교하지 못합니다. 그러하기에 다음의 사항들을 한번 시도해 보세요:

- 사용자가 기능을 사용하는 방식에 따라 내비게이션의 우선 순위를 지정하기 - 가장 있기있는 것이 상단에 있게 합니다. 

- 내비게이션과 관련된 수준을 최소화하기

- 내비게이션을 위한 명확하고 간결한 라벨 지정

- 다른 기능에 대한 단축키 액세스 제공

- 터치 스크린 탭 포인트로 30x30 픽셀 공간을 제공

- 링크가 시각적으로 구별되고 활성화 되었을 때 명확하게 표시되도록 하기 

- 모바일 사이트와 풀 사이트 간에 쉽게 교체되게 하기

최소한으로 콘텐츠 유지

사용자를 압도하지 마시길 바랍니다. - 작은 화면 공간을 존중해 주세요. 그리고 콘텐츠를 최소한으로 유지시켜 주세요.

모든 모바일 기기에서 콘텐츠가 보편적으로 지원되는지 확인하거나 피하세요. 예를 들어 플래시Flash를 생각해 본다면 사용하지 말아야겠죠.

관련 북마크를 위해 페이지 설명은 짧고 요점에 맞게만 해주세요.

필요한 입력사항 줄이기

사용자는 모바일 기기를 지루하게 만지작거리기 보단 모바일 웹 서비스를 통해 더 많은 것을 즐겨야 합니다. 다음을 한번 생각해 보세요:

- URL을 짧게 유지하기

- 대체 입력 메커니즘(비디오, 음성 등) 제공하기

- 양식 입력 최소화하기 (사용자가 데스크탑에 로그인 할 때 더 많은 데이터를 요구하면 됨)

- 영구적인 로그인 허용하기 (대부분의 스마트폰은 암호 또는 지문으로 보호됩니다. 로그인 상태가 유지되는 위험은 데스크탑보다 적습니다)

- 스크롤을 최소로 유지하고 한 방향으로 스크롤만 허용하기

모바일 연결은 안정적이지 않음을 기억하기

모바일 연결은 패치 적용 서비스가 있는 지역에서는 엄청나게 골머리 썩힐 수 있습니다. 다음을 시도해 보세요:

- 연결 중단시 손실되지 않도록 데이터 보유하기

- 빠른 로딩을 위한 페이지 크기 최소화하기

- 막대한 양의 대역폭과 데이터를 소비하는 모바일 사이트에서 광고 네트워크 없애기

- 이미지를 최소한으로 유지하고 이미지의 크기를 줄이기

- 포함된 이미지의 수를 최소한으로 줄이기 (로드 시간 단축)

지속적인 통합 경험

사용자가 모바일과 데스크탑 간에 이동할 때 비슷한 경험을 기대할 겁니다. 다음을 기억하세요:

- 연속성 유지: 사용자가 모바일 웹스토어에서 로그인하면 데스크탑에서와 마찬가지로 주문을 추적하고 구매할 수 있어야 합니다. 

- 일관성 유지: 모바일과 데스크탑 사이에서 사용자가 원하는대로 공통된 것을 전환할 수 있는 옵션을 제공해야 합니다.

- 브랜드 유지관리: 각 버전의 모양과 느낌이 비슷해야 합니다.

마치며

모바일은 기존 데스크탑 환경과는 다르며 모바일 환경의 문맥에 맞는 표준 UX 및 사용성 고려가 필요합니다. - 또한 모바일 환경은 새로운 디자인 고려사항을 가져옵니다. 모바일 디자이너는 최상의 사용자 경험을 제공하기 위해 세부사항에 주의를 기울이는 것이 무엇보다 중요하겠습니다. 

원문: designing for the mobile environment - some simple guidelines

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.