반응형 홈페이지, 화면만 줄이면 될까?
PC에서는 한눈에 보이던 제품 비교표가 휴대폰에서는 글자부터 읽기 어려워집니다.
확대하면 옆 항목이 사라지고, 문의 버튼은 한참 아래에 있습니다.
반응형 홈페이지는 화면 크기에 맞춰 콘텐츠의 배치와 크기가 유연하게 바뀌는 홈페이지입니다. 다만 화면 안에 모든 내용을 넣었다고 해서 모바일에서도 사용하기 편한 것은 아닙니다.
제대로 만들려면 크기뿐 아니라 읽는 순서와 누르는 방식까지 살펴야 합니다.
다 들어갔는데, 왜 보기 불편할까요?
책상 위 서류를 그대로 축소해서 명함 크기로 만들었다고 생각해보세요.
내용은 빠짐없이 있지만 읽기는 어렵습니다.
PC 화면을 줄여놓은 홈페이지에서도 비슷한 문제가 생깁니다.
가로로 놓인 사업 분야 여섯 개를 작게 유지하면 글자와 버튼이 너무 작아집니다.
반대로 모두 세로로 쌓으면 회사 소개만 읽다가 화면을 여러 번 내려야 합니다.
어느 쪽이든 화면 너비에는 맞습니다.
하지만 방문자가 필요한 정보를 찾기에는 불편할 수 있습니다.
그래서 반응형 홈페이지를 설계할 때는 "이 영역을 어떻게 줄일까?"와 함께 "이 화면에서 무엇을 먼저 보여줄까?"를 정해야 합니다.
세로로 쌓는 순간, 정보의 순서가 됩니다
PC에서는 회사 설명과 제품 사진, 문의 버튼을 한 화면에 나란히 배치할 수 있습니다.
모바일에서는 이 요소들이 위아래로 놓입니다.
이때 무엇을 먼저 두느냐에 따라 방문자가 회사와 서비스를 이해하는 과정이 달라집니다.
산업용 장비 홈페이지를 만든다고 가정해보겠습니다.
PC에서는 장비 사진 옆에 핵심 사양과 자료 다운로드 버튼을 함께 보여줄 수 있습니다.
모바일에서 사진을 전부 보여준 뒤 사양을 배치하면 방문자는 원하는 규격을 확인하기까지 오래 내려야 합니다.
이 경우 대표 이미지 다음에 핵심 사양을 보여주고, 추가 사진과 상세 설명을 이어 배치할 수 있습니다.
반대로 공간 디자인처럼 이미지가 선택에 큰 영향을 주는 서비스라면 사진을 먼저 충분히 보여주는 편이 적합할 수 있습니다.
모바일의 정보 순서는 업종 이름보다 방문자가 무엇을 확인하러 왔는지를 기준으로 정해야 합니다.
비교표를 카드로 바꾸면 해결될까요?
모바일 화면이 좁다고 모든 정보를 세로 카드로 바꾸는 것도 답은 아닙니다.
제품 설명을 하나씩 읽을 때는 카드가 편할 수 있습니다.
하지만 여러 제품의 크기와 성능을 비교하려는 사람에게는 카드 사이를 오가며 숫자를 기억해야 하는 부담이 생깁니다.
비교가 핵심이라면 표를 유지하되 옆으로 이동할 수 있다는 표시를 주거나, 비교할 항목을 먼저 선택하게 하는 방식도 검토할 수 있습니다.
여기서 중요한 것은 보기 좋은 모양보다 그 정보로 사용자가 하려는 행동입니다.
읽는 화면인지, 비교하는 화면인지, 입력하는 화면인지에 따라 설계 방식이 달라집니다.
문의 버튼은 보이는데, 문의는 끝낼 수 있나요?
반응형 홈페이지 검수는 버튼이 화면 안에 있는지 확인하는 것으로 끝나지 않습니다.
문의 버튼을 누른 뒤 입력을 마치고 제출하는 과정까지 확인해야 합니다.
손가락으로 눌러도 실수하지 않는지
작은 링크가 붙어 있으면 원하는 항목 대신 옆 메뉴를 누를 수 있습니다.
PC에서 마우스로 정확하게 클릭할 수 있었다고 휴대폰에서도 같은 조건이라고 볼 수는 없습니다.
메뉴와 버튼의 크기, 주변 간격을 함께 확인해야 합니다.
키보드가 올라와도 진행할 수 있는지
문의 양식에 연락처를 입력하는 상황을 가정해보겠습니다.
키보드가 나타난 뒤 다음 입력칸이 가려지거나, 하단 고정 버튼이 입력 영역과 겹치면 작성 중인 사람이 화면을 계속 움직여야 합니다.
오류가 발생했을 때도 마찬가지입니다.
"입력 내용을 확인하세요"라는 안내만 보여주면 어느 항목을 고쳐야 하는지 찾기 어렵습니다.
입력부터 오류 수정, 제출 완료까지 이어져야 문의 기능이 모바일에서도 작동한다고 볼 수 있습니다.
메인 화면 한 장으로는 판단할 수 없습니다
메인 화면은 깔끔한데 실제 콘텐츠가 들어간 상세 페이지에서 문제가 생기기도 합
니다.
제목이 두 줄을 넘거나, 제품명이 길거나, 관리자가 큰 이미지를 올렸을 때 배치가 달라질 수 있기 때문입니다.
디자인 시안에 들어간 짧고 정돈된 문구만으로는 운영 중에 생길 상황을 충분히 확인하기 어렵습니다.
검수할 때는 실제로 등록할 콘텐츠를 넣고 다음 행동을 직접 해보는 편이 좋습니다.
- 메뉴를 열어 원하는 서비스 찾기
- 제품 상세 내용과 비교 정보 확인하기
- 첨부파일 열거나 내려받기
- 문의 작성 후 제출 완료하기
스마트폰 한 종류뿐 아니라 태블릿이나 폭을 줄인 PC 창에서도 살펴보세요.
특정 화면 크기 사이에서 메뉴가 겹치거나 문장이 어색하게 끊기는 부분을 발견할 수 있습니다.
오코랩스는 화면 다음의 행동까지 봅니다
반응형 홈페이지를 만드는 목적은 여러 기기에서 같은 디자인을 보여주는 데서 끝나지 않습니다.
어떤 화면으로 들어와도 방문자가 정보를 이해하고 필요한 행동을 마칠 수 있어야 합니다.
오코랩스는 페이지를 설계할 때 사용자가 정보를 찾고 비교하고 문의하는 순서를 살펴봅니다.
관리자가 실제 콘텐츠를 등록했을 때의 변화도 함께 고려해 화면 구성과 기능을 정리합니다.
홈페이지를 새로 만들거나 개편할 예정이라면 휴대폰에서 고객의 입장으로 문의까지 진행해보세요.
멈칫하게 되는 지점이 있다면, 그 화면부터 오코랩스와 함께 살펴볼 수 있습니다.
반응형 홈페이지, 화면만 줄이면 될까?
PC에서는 한눈에 보이던 제품 비교표가 휴대폰에서는 글자부터 읽기 어려워집니다.
확대하면 옆 항목이 사라지고, 문의 버튼은 한참 아래에 있습니다.
반응형 홈페이지는 화면 크기에 맞춰 콘텐츠의 배치와 크기가 유연하게 바뀌는 홈페이지입니다. 다만 화면 안에 모든 내용을 넣었다고 해서 모바일에서도 사용하기 편한 것은 아닙니다.
제대로 만들려면 크기뿐 아니라 읽는 순서와 누르는 방식까지 살펴야 합니다.
다 들어갔는데, 왜 보기 불편할까요?
책상 위 서류를 그대로 축소해서 명함 크기로 만들었다고 생각해보세요.
내용은 빠짐없이 있지만 읽기는 어렵습니다.
PC 화면을 줄여놓은 홈페이지에서도 비슷한 문제가 생깁니다.
가로로 놓인 사업 분야 여섯 개를 작게 유지하면 글자와 버튼이 너무 작아집니다.
반대로 모두 세로로 쌓으면 회사 소개만 읽다가 화면을 여러 번 내려야 합니다.
어느 쪽이든 화면 너비에는 맞습니다.
하지만 방문자가 필요한 정보를 찾기에는 불편할 수 있습니다.
그래서 반응형 홈페이지를 설계할 때는 "이 영역을 어떻게 줄일까?"와 함께 "이 화면에서 무엇을 먼저 보여줄까?"를 정해야 합니다.
세로로 쌓는 순간, 정보의 순서가 됩니다
PC에서는 회사 설명과 제품 사진, 문의 버튼을 한 화면에 나란히 배치할 수 있습니다.
모바일에서는 이 요소들이 위아래로 놓입니다.
이때 무엇을 먼저 두느냐에 따라 방문자가 회사와 서비스를 이해하는 과정이 달라집니다.
산업용 장비 홈페이지를 만든다고 가정해보겠습니다.
PC에서는 장비 사진 옆에 핵심 사양과 자료 다운로드 버튼을 함께 보여줄 수 있습니다.
모바일에서 사진을 전부 보여준 뒤 사양을 배치하면 방문자는 원하는 규격을 확인하기까지 오래 내려야 합니다.
이 경우 대표 이미지 다음에 핵심 사양을 보여주고, 추가 사진과 상세 설명을 이어 배치할 수 있습니다.
반대로 공간 디자인처럼 이미지가 선택에 큰 영향을 주는 서비스라면 사진을 먼저 충분히 보여주는 편이 적합할 수 있습니다.
모바일의 정보 순서는 업종 이름보다 방문자가 무엇을 확인하러 왔는지를 기준으로 정해야 합니다.
비교표를 카드로 바꾸면 해결될까요?
모바일 화면이 좁다고 모든 정보를 세로 카드로 바꾸는 것도 답은 아닙니다.
제품 설명을 하나씩 읽을 때는 카드가 편할 수 있습니다.
하지만 여러 제품의 크기와 성능을 비교하려는 사람에게는 카드 사이를 오가며 숫자를 기억해야 하는 부담이 생깁니다.
비교가 핵심이라면 표를 유지하되 옆으로 이동할 수 있다는 표시를 주거나, 비교할 항목을 먼저 선택하게 하는 방식도 검토할 수 있습니다.
여기서 중요한 것은 보기 좋은 모양보다 그 정보로 사용자가 하려는 행동입니다.
읽는 화면인지, 비교하는 화면인지, 입력하는 화면인지에 따라 설계 방식이 달라집니다.
문의 버튼은 보이는데, 문의는 끝낼 수 있나요?
반응형 홈페이지 검수는 버튼이 화면 안에 있는지 확인하는 것으로 끝나지 않습니다.
문의 버튼을 누른 뒤 입력을 마치고 제출하는 과정까지 확인해야 합니다.
손가락으로 눌러도 실수하지 않는지
작은 링크가 붙어 있으면 원하는 항목 대신 옆 메뉴를 누를 수 있습니다.
PC에서 마우스로 정확하게 클릭할 수 있었다고 휴대폰에서도 같은 조건이라고 볼 수는 없습니다.
메뉴와 버튼의 크기, 주변 간격을 함께 확인해야 합니다.
키보드가 올라와도 진행할 수 있는지
문의 양식에 연락처를 입력하는 상황을 가정해보겠습니다.
키보드가 나타난 뒤 다음 입력칸이 가려지거나, 하단 고정 버튼이 입력 영역과 겹치면 작성 중인 사람이 화면을 계속 움직여야 합니다.
오류가 발생했을 때도 마찬가지입니다.
"입력 내용을 확인하세요"라는 안내만 보여주면 어느 항목을 고쳐야 하는지 찾기 어렵습니다.
입력부터 오류 수정, 제출 완료까지 이어져야 문의 기능이 모바일에서도 작동한다고 볼 수 있습니다.
메인 화면 한 장으로는 판단할 수 없습니다
메인 화면은 깔끔한데 실제 콘텐츠가 들어간 상세 페이지에서 문제가 생기기도 합
니다.
제목이 두 줄을 넘거나, 제품명이 길거나, 관리자가 큰 이미지를 올렸을 때 배치가 달라질 수 있기 때문입니다.
디자인 시안에 들어간 짧고 정돈된 문구만으로는 운영 중에 생길 상황을 충분히 확인하기 어렵습니다.
검수할 때는 실제로 등록할 콘텐츠를 넣고 다음 행동을 직접 해보는 편이 좋습니다.
스마트폰 한 종류뿐 아니라 태블릿이나 폭을 줄인 PC 창에서도 살펴보세요.
특정 화면 크기 사이에서 메뉴가 겹치거나 문장이 어색하게 끊기는 부분을 발견할 수 있습니다.
오코랩스는 화면 다음의 행동까지 봅니다
반응형 홈페이지를 만드는 목적은 여러 기기에서 같은 디자인을 보여주는 데서 끝나지 않습니다.
어떤 화면으로 들어와도 방문자가 정보를 이해하고 필요한 행동을 마칠 수 있어야 합니다.
오코랩스는 페이지를 설계할 때 사용자가 정보를 찾고 비교하고 문의하는 순서를 살펴봅니다.
관리자가 실제 콘텐츠를 등록했을 때의 변화도 함께 고려해 화면 구성과 기능을 정리합니다.
홈페이지를 새로 만들거나 개편할 예정이라면 휴대폰에서 고객의 입장으로 문의까지 진행해보세요.
멈칫하게 되는 지점이 있다면, 그 화면부터 오코랩스와 함께 살펴볼 수 있습니다.