더 나은 모바일 UX를 위해 컨텐츠를 적응시키는 7 가지 방법
훌륭한 디자인의 시작은 컨텐츠로 시작됩니다. 뛰어난 모바일 UX를 최대한 활용하려면 컨텐츠를 약간 조정하고 변경해야 할 수도 있습니다.
그러나 어디서 시작합니까? 모바일 장치에서 컨텐츠가 원활하게 작동하도록하려면 어떻게 컨텐츠를 조정해야합니까? 사용자가 작은 화면과 상호 작용하는 방식과 그것이 읽고 싶은 내용에 얼마나 영향을 미치는지에 대한 생각부터 시작합니다.
1. 화면 당 하나의 생각
휴대 기기의 콘텐츠를 접을 때 화면 당 하나의 요소가 있도록 요소를 계획하십시오. 휴대 전화가 더 큰 크기로 다시 유행하는 것처럼 보이지만 화면에 많은 정보를 넣는 유혹에 빠지지 마십시오!
화면 당 하나의 생각으로 충분합니다. 더 이상 사용자를 압도 할 위험이 있습니다.
모바일 장치 사용자는 멀티 태스킹 경향이 있습니다. 그들은 야구 경기에 참석하는 동안 친구와 대화하는 동안 귀하의 웹 사이트를보고 있습니다. 메시지와 내용을 단순 하고 직접적으로 유지함으로써 단일 생각이 전달 될 가능성이 높아집니다.
그러나 한 생각은 어떻게 생겼습니까? 텍스트, 이미지 및 실행 가능한 요소로 모두 묶여 있습니다. 콘텐츠 그룹은 사용자에게 하나의 선택을 요청해야합니다. 이렇게 하시겠습니까?
2. 탐색 우선 순위 지정
사용자가 웹 사이트의 모바일 (응답) 버전을 방문 할 때 사용자가하는 경향이 있거나 원하는 것을해야합니다. 사용자가 해당 요소로 빠르게 이동할 수있는 탐색이 쉬운 지 확인하십시오.
여러 수준의 탐색 옵션이 10 개있는 메뉴가 데스크탑 사이트에서 작동 할 수 있지만 모바일 사용자는 종종 시간이 더 많이 소요됩니다. 그들은 무언가를 찾을 때까지 사이트 주변을 찌를 의도가 없습니다.
탐색이 간단하고 간소화되어야합니다. 어디서부터 시작해야할지 확실하지 않은 경우 모바일 사용자 분석을 살펴보십시오. 방문한 상위 3-4 페이지는 무엇입니까? 이 페이지가 예상 한 내용과 일치합니까? 주요 탐색 요소를 찾았으므로 그에 따라 모바일 컨텐츠를 조정할 수 있습니다.
3. 검색 엔진처럼 생각
알고리즘을 재생하지 마십시오. 사용자가 읽고 싶은 양질의 콘텐츠를 만듭니다. 하루에 10 회의 페이지 뷰를 확보하든 수백만 개를 방문하든 모바일 장치의 콘텐츠와 관련하여 검색 엔진처럼 생각하고 싶습니다. 모든 단어, 이미지 및 내용이 빠르고 검색 가능해야합니다. 그러나 알고리즘을 재생하지 마십시오. 사용자가 읽고 싶은 양질의 콘텐츠를 만듭니다.
모바일과 관련하여 이는 일부 컨텐츠 요소를 분석하는 것을 의미 할 수 있습니다. 예를 들어, 홈 페이지에서 이미지가 3 개가 아닌 가장 중요한 사진 중 하나를 선택하십시오. 모바일 사이트의 무게를 낮추지 마십시오. 웹 속도와 Wi-Fi가 항상 향상되고 있지만 일부 사용자는 연결에 어려움을 겪고 웹 사이트에 여전히 액세스 할 수 있어야합니다.
Google에서 제공하는이 멋진 도구를 사용하여 모바일 페이지 속도를 확인할 수 있습니다.
4. 텍스트를 더 크게 만들기
화면 이 작을수록 더 작은 텍스트를 의미해서는 안됩니다. 내용을보다 쉽게 읽고 소화 할 수 있도록 실제로 포인트 크기를 늘려야합니다. 본문을 살펴보고 한 줄에 30 ~ 40자를 사용할 수있는 크기를 선택하십시오. (이것은 데스크탑 화면에 권장되는 것의 약 절반입니다.)
작은 화면에서 텍스트를 더 읽기 쉽게 만드는 또 다른 방법이 있습니다. 더 나은 모바일 타이포그래피 디자인을위한 팁에 대해서는 이전 Design Shack 기사에서 찾을 수 있습니다.
5. 의미있는 현미경 작성
버튼과 같은 요소 내부의 텍스트 인 훌륭한 현미경은 디자인을 만들거나 깨뜨릴 수 있습니다. 현미경은 디자인에 개성과 불꽃을 더할 수 있습니다. 또한 많은 정보를 전달하고 사용자가 디자인을 둘러 볼 수 있도록 도와줍니다.
특히 모바일 장치에서는 현미경을 보통보다 약간 크게 만들어 사용자가 정확히 무엇을해야하는지 알 수 있도록 항상 형태로 사용하십시오.
예를 들어, 휴대폰에서 지불 할 때 발생하는 일반적인 문제에 대해 생각해보십시오. 양식은 여러 화면이나 스크롤에 걸쳐있을 수 있습니다. 현미경을 안내하면 처음부터 모든 것을 올바르게 채우기가 훨씬 쉬워집니다. (모바일 사용자의 작업을 변환하는 데있어 핵심적인 요소입니다.)
6. 모바일에 불필요한 효과 제거
모바일 디자인에 필요하지 않은 모든 것을 제거하십시오. 회전하는 애니메이션과 시차 스크롤 기능은 데스크탑 웹 사이트에서 놀랍지 만 모바일 버전을 떨어 뜨릴 수 있습니다. 모바일 디자인에 필요하지 않은 모든 것을 제거하십시오. 모든 것이 빠르고 원활하게로드되기를 원합니다. 작동하거나 작동하지 않을 수있는 애니메이션은 사용자와 즉시 연결되지 않습니다.
당신이 제거 할 수있는 또 다른 효과? 호버 효과. 터치 동작에 대한 호버 상태와 같은 것은 없습니다.
명백한 피드백이있는 이해하기 쉬운 탭 기능 (클릭 대체)으로 모바일 사용자 경험을 간소화합니다. 조치가 발생했는지 사용자가 질문하지 않기를 바랍니다. 항상 분명해야합니다.
7. 규모에 적응
모든 것이 작은 모바일 반응 형 사이트에 착륙하는 것보다 더 실망스러운 것은 없습니다. 모바일 디자인의 요점은 더 작은 장치를 사용하는 사용자가 웹 사이트에보다 쉽게 액세스 할 수 있도록하는 것입니다. 해당 규모에 맞게 컨텐츠를 조정해야합니다.
때로는 내용을 조정하는 것이 단지 부분의 재 배열 일뿐입니다.
- 데스크탑에서 화면에 걸쳐 정렬 된 상자는 모바일 장치에 세로로 쌓일 수 있습니다.
- 모바일 사용의 지배적 인 방향 (수직)을 기준으로 사진이 정사각형 또는 세로로 잘립니다.
- 간결하게 텍스트를 편집하고 자릅니다.
- 탐색은 용도가 변경되어 다른 위치에 배치됩니다.
- 클릭 유도 문안은 거의 화면 크기가 큰 요소로 구성됩니다.
- 모든 버튼과 탭 요소는 사용자가 휴대 전화를 잡는 방식에 따라 손이 닿기 쉬운 위치에 배치됩니다.
결론
웹 사이트의 일부 내용을 다시 생각할 준비가 되셨습니까? 반응 형 웹 사이트를 구축하고 모든 것이 모바일 사용자를 변환한다고 가정하면 디자인의 모바일 부분을 평가할 차례입니다. 사용자가 디자인과 상호 작용하는 방식을 실제로 바꿀 수있는 작은 콘텐츠 변경의 여지가있을 수 있습니다.
이것은 디자인 프로세스의 중요한 부분입니다. 분석 내용을 살펴보십시오. 모바일 장치에서 디자인에 액세스하는 사용자 비율은 몇 퍼센트입니까? 자신의 요구를 충족시키기 위해 조정하지 않으면, 사용자 기반의 큰 부분을 불쾌하게 만들지 않아도됩니다.
