모바일 서비스 사용자 인터페이스 설계 지침

모바일 서비스 사용자 인터페이스 설계 지침

기본원칙은 스마트폰과 태블릿PC를 통한 서비스를 기획하고 설계하는데 반드시 준수해 야 할 기본사항들을 정의하고 있다. 공공기관 모바일 서비스의 발주자와 설계자는 다음의 기본원칙을 숙지하고 기본원칙에서 제시하는 필수사항과 권장사항, 제약사항을 고려하여 개 발한다.
1) 사용자 경험에 초점을 맞춘다.
2) 소수의 핵심기능에 집중한다.
3) 디바이스의 호환성, 확장성을 고려한다.
4) 정보소외계층의 접근성을 고려한다.
5) 웹표준을 준수하여 개발한다.
6) 일관성을 유지한다.
7) 이미지를 제한적으로 사용한다.

1. 사용자 경험에 초점을 맞춘다.

• 사용자가 서비스를 사용하는 목적과 상황을 이해한다.
  • 사용자가 누구인가, 나이, 숙련도, 문화 등에 대해 충분한 이해가 바탕이 되어야 한다.
  • 사용 환경과 목적에 대해 이해하고 사용자 중심의 사고방식으로 설계해야 한다. 예를 들어 공공장소에서 사용하는지 사적인 공간에서 사용하는지, 여유가 있는 시간에 사 용하는지, 지하철을 기다리는 짧은 시간에 사용하는지 등의 여러 상황적 요소들이 복합적으로 작용하여 사용자 경험을 만들어 낸다.
  • 이 서비스를 얼마나 자주 사용할 것인가를 이해하고 사용자 경험의 만족도를 높이는 데 집중해야 한다.
• 사용자가 설명서 없이 쉽게 사용할 수 있어야 한다.
  • 사용자가 서비스 이용에 대한 사전지식이 없이도 직관적으로 사용법을 파악하고 쉽 게 사용할 수 있어야 한다.
• 사용자의 잠재적인 실수를 고려해야 한다.
  • 사용자는 언제든지 실수를 할 수 있으며 사용자의 실수를 뒤로 되돌릴 수 있는 기능이 항상 제공되어야 한다.
• 항상 훌륭한 기술이 사용자의 만족도를 높이는 것은 아니다.
  • >기술적 요인을 먼저 고려하게 될 때 사용자가 원하지 않는 기능을 제공하게 될 수 있 다. 기술적 요인의 적용은 서비스의 목적에 부합되며 기술을 적용하는 것이 사용자 경 험을 높이는데 도움이 되는지가 적용여부의 판단기준이 되어야 한다.
• 아름다운 디자인만이 최선인 것은 아니다.
  • 기술적 요인을 먼저 고려하게 될 때 사용자가 원하지 않는 기능을 제공하게 될 수 있 다. 기술적 요인의 적용은 서비스의 목적에 부합되며 기술을 적용하는 것이 사용자 경 험을 높이는데 도움이 되는지가 적용여부의 판단기준이 되어야 한다.
• 모바일 사용성의 특징을 이해한다.
  • 모바일의 사용은 탭(tap)으로 이루어진다. 손으로 터치 가능한 영역은 최소 40*40 pixel이므로 이보다 큰 반응영역으로 디자인해야 한다.
  • 모바일에서 입력기능은 PC에서의 입력보다 많은 어려움이 있으며, 신체기능이 떨어지 는 사용자나 이동 중 사용으로 입력기능 사용에 어려움이 있는 사용자를 고려하여 입 력을 최소화하고 선택할 수 있도록 하거나, 자동완성 기능을 제공하는 것이 좋다.

2. 소수의 핵심기능에 집중한다.

• 간략해야 한다.
  • ○ 모바일 화면은 제안된 크기 때문에 웹사이트와 같은 방대한 양의 정보를 보여주는 것이 어렵다. 웹사이트와 동일한 정보를 그대로 모바일로 전환하려 한다면 여러 번의 탭과 브라우징을 요구하여 복잡성이 증가된다. 따라서 매우 불편한 경험을 제공하게 되며 사용자를 이탈하게 하는 결과를 초래할 수 있다.
  • 많은 메뉴와 계층구조를 따라 메뉴를 찾아 들어가게 하는 방식은 모바일 서비스에 적합하지 않다.
• 모바일에 최적화된 사용자 경험을 제공한다.
  • 서비스가 제공하고자 하는 핵심기능을 몇 가지로 리스트 하고 부가적인 정보는 생략하는 것이 좋다.
• 목적을 분명히 한다.
  • 여러 가지 주제의 메뉴를 복합적으로 제공함으로써 서비스의 정체성(Identity)이 모호해지는 것을 피한다.
  • 하나의 서비스는 간단히 정의할 수 있는 핵심기능을 중심으로 필요에 따라 이것을 보조할 수 있는 몇 개의 추가기능으로 구성하는 것이 좋다.
  • 제공되는 서비스의 일관성을 유지한다. 이질적인 성격의 여러 가지 서비스를 동시에 제공하는 것 보다는 서비스를 분할하여 독립적으로 제공하는 것을 권장한다.

3. 디바이스의 호환성과 확장성을 고려한다. (App개발 시 예외)

• 3개 이상의 브라우저(Browser)에서 동일하게 작동하도록 설계한다.
  • 공공기관의 모바일 서비스는 다양한 사용자 환경에 따라 여러 단말에서 동일하게 동작하는 것이 중요하다.
  • 기술적 제약이 없는 한 기본적으로 모바일 웹은 크로스 브라우징(Cross browsing)을 지원하나 기기별로 약간의 차이가 발생하기 때문에 최소 3개 이상의 브라우저(Browser)에서 테스트하여 동일하게 동작하고 같은 사용자 경험을 제공할 수 있도록 해야 한다.
• 화면의 크기는 320*480을 최소 크기로 하여 확장성을 고려한다.
  • 브라우저의 해상도는 제조사별로 상이하며, 하나의 브라우저에서도 가로모드와 세로모드의 전환을 고려하여 두 가지의 해상도에 맞춤형으로 지원되도록 해야 한다.
  • 신규 출시되는 디바이스의 해상도는 지속적으로 커지고 있기 때문에 확장성을 고려하여 각 디바이스별 화면 해상도에 유동적으로 맞도록 개발하되, 하위버전도 수용할 수 있어야 한다.
  • 다양한 브라우저와 해상도에 Width 값이 꽉 차도록 개발하기 위해서는 넓이 값을 절대 값으로 설정하지 않고 100% 상대 값으로 설정해야 한다.
  • 화면 유동성을 고려하여 레이아웃에 고정 값의 절대좌표를 사용해서는 안 된다.
• 특정한 플랫폼에만 작동하는 기능에 의존하지 않는다.
  • 플랫폼별로 지원되는 기능이 다르므로 이 요소들을 확인 후 공통적으로 적용되는 기능을 중심으로 개발해야 한다.
  • 예를 들어 안드로이드 플랫폼에서 제공하는 하드웨어 Back 버튼은 iOS를 기반으로 한 디바이스에서는 적용될 수 없다. 따라서 모든 메뉴와 내비게이션 버튼은 화면상에서 선택할 수 있도록 제공되어야 한다.

4. 정보소외계층의 접근성을 고려한다.

• 다양한 조건의 환경과 사용자가 사용할 수 있어야 한다.
  • 대국민 서비스로서의 모바일 서비스를 설계할 때 정상인을 비롯하여 노인과 장애인 등의 접근성이 고려되어야 한다. 단 행정서비스는 예외로 한다.
  • 서비스의 성격에 따라 어린이나 노인을 사용자로 포함하는 경우는 각 사용자들의 특징에 기반을 둔 설계가 필요하다.
  • 정상인이라 할지라도 공공장소에서 매너모드를 사용하거나 시끄러운 곳에서 이용하는 경우는 음성정보를 놓칠 수 있으며 이동 중 사용은 텍스트 입력에 제한이 생길 수 있다.
  • 모바일 서비스 설계 시 고려해야 할 사용자 특성은 다음과 같다.
    ­ 어린이 : 모바일을 처음 사용하거나 경험치가 낮아 활용능력이 떨어짐. 고급어휘 또는 외국어 능력이 떨어짐.
    ­ 노인 : 모바일 기기를 처음 사용하거나 자주 사용하지 않아서 사용하는 능력이 떨어짐. 신체기관의 저하로 인하여 시력, 청력, 운동 기능이 정상인보다 떨어짐
    ­ 시각장애, 저시력 : 시력이 낮은 사용자로 작은 폰트의 사용을 제한
    ­ 색맹 : 색에 대한 구별이 어려운 사용자로 색상에 의해 내용을 구분하는 콘텐츠 사용을 제한
    ­ 전맹 : 시력이 전혀 없고 청력에 의존하는 경우로 특정 디바이스에서만 음성기능을 이용하여 사용가능
    ­ 청각장애 : 멀티미디어 콘텐츠의 음성을 인지할 수 없으므로 자막이나 대체 텍스트를 제공
    ­ 기타장애 : 광발작성 장애는 주파수 범위가 3hz에서 49hz인 경우 깜박임이 포함된콘텐츠에 발작을 일으킬 수 있음
• 접근성을 위한 아래 지침을 준수하여 개발한다.
  • 동영상 등 시청각 멀티미디어 콘텐츠는 자막이 제공되어야 한다.
  • 정보가 있는 이미지를 배경화면으로 사용하지 않아야 한다.
  • 색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달할 수 있어야 한다.
  • 텍스트는 충분히 읽을 수 있는 크기로 제공되어야 한다.
  • 주요내용의 콘텐츠의 경우 본문텍스트의 확대기능을 제공하는 것이 바람직하다.
  • 깜박이는 콘텐츠는 최대한 사용을 자제하고 불가피하게 이를 사용할 경우 이에 대한 제어 기능을 제공해야 한다.
  • 불필요한 팝업의 사용을 최대한 자제한다.
  • 링크 텍스트에 연결되는 페이지를 유추할 수 있는 정보를 제공해야 한다.
  • 어휘나 단어의 선택은 사용자의 입장에서 이해 가능한 것으로, 사용자가 알고 있는 전문적 수준을 고려하여 제공해야 한다.
  • 실시간으로 내용이 갱신되는 콘텐츠는 짧은 시간에 이것을 판독하지 못하는 사용자를 위하여 이전, 다음, 정지 버튼을 제공하는 것을 권장한다.

5. 웹표준을 준수하여 개발한다. (App개발 시 예외)

HTML/CSS/Javascript 소스를 분리하여 개발한다. : W3C 표준을 준수한 코딩은 다른 디바이스간의 호환을 가능하게 하며, 시각장애인이 음성모드로 서비스를 이용할 수 있게 한다. 웹표준은 HTML 4.0 이상 버전을 적용한다.

• 유효한 마크업(Mark Up) : 표준 문법에 유효한 마크업 언어(Markup Language)로 문서를 작성한다.
• 스타일 시트 : 레이아웃과 형식의 설계는 스타일 시트를 사용하여 스킨적용이 가능하게 한다.
• 테이블 속의 테이블 비사용 : 테이블 내에 또 다른 테이블을 포함하지 않는다.
• 테이블 레이아웃 비사용 : 테이블을 이용하여 레이아웃을 구성하지 않는다.
• 여백에 그래픽 비사용 : 여백 공간에 그래픽을 사용하지 않는다.
• 프레임 비사용 : 프레임을 사용하지 않는다.

6. 일관성을 유지한다.

• 스타일의 일관성을 유지한다.
  • 컬러, 폰트, 이미지 요소들의 스타일의 일관성을 유지하는 것은 해당 서비스에 대한 정체성(Identity)을 형성하는데 도움을 준다.
  • 모바일 화면에서 사용된 아이콘은 항상 같은 의미로 사용되어야 하며 사용자가 관습적으로 알고 있는 정보와 일치하도록 하는 것이 좋다. 관습적인 아이콘의 의미를 다르게 적용할 경우 사용자에게 혼란을 야기할 수 있다.
  • 세로모드에서 가로모드로 전환되었을 때 동일한 레이아웃과 스타일을 유지할 수 있도록 하는 것은 사용자의 혼란을 줄이고 일관된 맥락에서 서비스를 이용할 수 있도록 돕는다.
• 용어사용의 일관성을 유지한다.
  • 서비스 내의 레이블링 체계는 일관된 표준에 의해 제공되어야 한다.
  • 정의된 사용자군의 연령 및 전문용어에 대한 이해수준을 기초로 하여 사용되는 어휘의 수준을 일관되게 유지해야 한다.
  • 화면에 나타나는 하나의 버튼은 항상 같은 의미로 사용되어야 한다.
• 조작방식의 일관성을 유지한다.
  • 한 서비스 안에서의 내비게이션 버튼이 나타나는 위치와 조작방식, 피드백은 항상 일관된 형식으로 제공되어야 한다.

7. 이미지를 제한적으로 사용한다.

• 경량화된 이미지를 사용한다.
  • 이미지 사용 시 데이터 량을 고려하여 경량화된 디자인을 제공해야 한다. 이미지의 데이터 량이 클경우 화면의 렌더링 속도를 저하시킬 수 있으며, 사용자에게 불필요한 데이터 사용요금을 발생시킬 수 있다.
• 비윤리적 이미지를 사용하지 않는다.
  • 이미지 적용이 성적 표현이나, 특정 종교나 인종, 여성의 비하 등 사회적 갈등을 유발할 수 있는 이미지는 사용을 금한다.
• 색상과 그래픽에 의존한 서비스를 제공하지 않는다.
  • 색상과 그래픽에 의존한 서비스는 장애인의 접근성을 떨어뜨린다.
  • 색상의 표현은 디바이스별로 다르며, 색상능력이 뛰어난 기기라도 밝은 곳에서는 잘 안보일 수 있다.
  • 이미지를 적용할 때 모든 이미지에는 대체 텍스트(Alt text)를 제공해야 한다.
• 이미지의 저작권을 확보한다.
  • 적용 이미지나 아이콘의 저작권 유무를 확인하고 저작권이 확보되지 않은 이미지를 무분별하게 사용하지 않아야 한다.
  • 이미지의 콘텐츠가 개인의 초상권이나 프라이버시를 침해하지 않도록 한다.