터치 스크린은 키보드 및 마우스와 다르게 작동합니다.
모바일 장치 용 웹 사이트 디자인 초기에는 대부분의 개발자가 제품을 두 가지로 나누었습니다. 그들은 완벽하게 기능하는 데스크톱 버전을 출시 한 후 캔디 바폰 및 3G 무선 네트워크의 제한된 기능과 네트워크 속도를 수용하기 위해 브랜딩 및 이미지의 대부분을 제거한 "모바일에 최적화 된"버전을 출시했습니다.
그러나 현대의 스마트 폰은 어제의 DSL 라인보다 좋거나 더 나은 네트워크를 통해 데스크톱 PC만큼 효율적으로 웹 페이지를 렌더링 할 수 있습니다.
그런 다음 디자인은 단일 사용자 인터페이스로 수렴됩니다. 그러나 디자이너의 위험은 스마트 폰이나 태블릿이 현대적인 반응 형 웹 사이트를 렌더링 할 수 없다는 것이 아닙니다. 오히려 터치 스크린 장치에서 사용자가 입력하는 방법은 기본 사이트 디자인에 의미있는 변화가 필요합니다. 방문자가 키보드와 마우스를 가지고 있다고 가정하고 웹 사이트를 구축 한 날은 끝났습니다.
기본 터치 스크린 디자인 규칙
터치 스크린 인식 웹 인터페이스를 설계하려면 기존의 모니터 마우스 방식의 키보드 방식을 발전시켜야합니다. 특히 제스처, 탭, 멀티 터치 입력과 같은 상호 작용을 수용해야합니다.
- 두드리기가 정확하지 않습니다. 고객이 유아의 손가락을 가지고 있지 않다면, 매우 정확한 소프트웨어 제어가 있어도 탭하고 정확하게 할 수 없습니다.
- 제스처는 탭과 다릅니다. 터치 스크린에서 긴 페이지를 스크롤하려면 사용자가 손가락 하나를 브라우저 창 위로 쓸어 넘기십시오. 이것은 마우스로 탐색 할 때까지 마우스를 아래로 움직이는 것을 인식 할 때까지는 중요하게 보이지 않을 수 있습니다.
- 손가락 두 개 (이상). 사용자는 장치에서 동시에 여러 손가락 탭을 사용하여 손가락을 제어 할 수 있습니다. 이러한 추가 탭은 사용자 장치의 운영 체제에 따라 특정한 것을 의미 할 수 있습니다.
- 고광택 장치. 대부분의 터치 스크린 태블릿의 화면은 튼튼한 유리로 만들어져 있습니다. 이 물질은 밝은 빛의 상황에서 많은 눈부심을 겪어 읽을 수 없게됩니다. 또한 모든 터치로 지문과 얼룩이 화면에 표시되어 페이지의 모양에 영향을 줄 수 있습니다.
- 온 스크린 키보드. 일부 사용자는 무선 키보드를 사용하여 태블릿에 연결하지만 대부분의 태블릿 사용자는 터치 키보드를 사용하여 데이터를 입력합니다. OSK 항목은 장황한 오타를 유발할뿐만 아니라 오랜 시간 동안 사용하는 것이 불편합니다.
이러한 장치의 기능으로 인해 웹 디자이너는 터치 스크린 사용자를위한 몇 가지 기본 디자인 규칙을 강조해야합니다.
- 클릭 가능한 항목을 너무 가깝게 두지 마십시오. 닫기가 너무 가깝도록 정의하는 어렵고 빠른 규칙은 없지만 특히 작은 글꼴 크기의 링크 목록은 뚱뚱한 손가락으로 클릭 (탭핑)하여 탐색하기가 어려울 수 있습니다. 링크를 클릭하기 만하면 확대해야하는 것은 짜증나는 일입니다. 이 원칙은 버튼뿐만 아니라 링크에서도 마찬가지입니다.
- 계층 구조를 열어두기가 어려울 수 있습니다. 인기있는 동적 메뉴 중 하나는 사용자가 마우스를 클릭 한 다음 하위 메뉴 위로 마우스를 가져 가면 자바 스크립트를 사용하여 하위 메뉴를 엽니 다. 이러한 상태는 터치 스크린에 열려 있거나 닫히지 않을 수 있기 때문에 터치 스크린에서 사용하기가 매우 어렵거나 불가능할 수 있습니다.
- 링크 및 클릭 가능 영역을 창 오른쪽 가장자리에서 멀리 이동합니다. 대부분의 사람들은 오른 손잡이이며 화면의 한 쪽에서 스크롤하는 경향이 있습니다. 스크롤은 제스처로 끝나기 때문에 실수로 링크에서 스 와이프를 시작할 수 있습니다. 사용자가 페이지를 스크롤하고 실수로 링크를 두드리면 사용자가 짜증을 낼 수 있습니다. 링크를 오른쪽에서 멀리 이동하면 이러한 불편 함을 피할 수 있습니다.
- 마우스가 없습니다. 그리고 이것은 마우스 포인터 가 없다는 것을 의미합니다. 클릭 할 수있는 것을 나타 내기 위해 마우스 포인터를 변경해서는 안됩니다.
- 호버트 상태 가 존재하지 않습니다. 위의 결과로, 마우스가 없기 때문에 마우스를 가져갈 필요가 없습니다. 링크는 터치 스크린 장치에서 클릭 (탭)되거나 클릭되지 않으므로 색상 변경, 도구 설명 또는 상태 막대 변경과 같은 마우스 오버 상태에서 유용한 정보를 추론 할 수 없습니다.
- 검정색 배경은 눈부심을 강화합니다. 검정색 배경이있는 사이트는 눈부심 때문에 터치 스크린 장치에서 읽기가 매우 어려울 수 있습니다. 검은 색은 장치의 지문을 더 선명하게 보이게하여 화면을 흐리게 만듭니다. 그리고 검은 색은 화면의 텍스트보다 더 자주 사용자의 얼굴을 반사하여 화면을 거울로 바꿀 수 있습니다.
- 양식에 긴 텍스트 블록을 쓰는 것은 어렵습니다. iPad 또는 Android 또는 Windows 태블릿에 전체 소설을 쓸 수는 있지만 대부분의 사람들은 긴 텍스트를 위해 화면 키보드를 사용하는 것을 좋아하지 않습니다. 디자인이 가능한 한 짧고 쉽게 데이터를 입력할수록 좋습니다.
터치 스크린을 염두에두고 디자인하는 가장 중요한 측면은 터치 스크린 장치에서 페이지 를 테스트하는 것 입니다. 많은 iPad 및 Android 에뮬레이터를 사용할 수 있으며 많은 Windows 태블릿을 사용할 수 있지만 여전히 터치 스크린을 제공하지는 않습니다. 새로운 웹 사이트 디자인을 출시 하기 전에 태블릿에서 벗어나 시도해 보지 않는 한 링크가 너무 가깝거나 버튼이 너무 작거나 눈부심으로 페이지를 읽기가 너무 힘들다는 것을 알 수 없습니다.