지난 5년동안 모바일 트래픽의 점유율이 20% 증가했으며, 오늘날 반응형 디자인은 이미 당연한 것으로 받아 들여지고 있다. 2020년에는 모바일에서 모든 웹 사이트에 액세스 할 수 있으며 잘 작동한다. 대부분의 사용자는 스마트폰이나 태블릿에서 제대로 작동하지 않는다는 사실을 알게되면 사이트를 떠나고, Google은 모바일 장치에 최적화되지 않은 경우 검색 결과에서 사이트 순위를 낮춘다.
따라서 반응형 웹 사이트의 디자인에는 정적 웹 사이트의 개발과는 다른 특별한 접근 방식이 필요하다. 디자이너는 반응형 디자인을 사용함에 있어, 먼저 기기(스마트폰, 태블릿 또는 컴퓨터)에 의해 디자인을 결정한 후 기기의 화면 크기에 따라 보여준다.
한편으로 반응형 디자인의 생성은 사이트의 개발과 유지 관리를 단순화한다. 코드와 SEO는 모든 장치에서 동일하다. 반면 반응형 사이트는 화면에 맞게 전체 사이트를 확장하는 것이 아니라, 페이지의 모든 요소를 조정하는 것이기 때문에 콘텐츠와 스타일을 100% 제어하지 못한다. 디자이너가 사용자 기기마다의 크기를 알 수 없기 때문이다. 반응형 디자인을 디자인할 때, 디자이너 지망생들은 흔한 실수를 하는 반면, 숙련된 전문가들은 타협을 해야 한다.
반응형 디자인이 쓰레기일 때
- 느린 속도
반응형 디자인은 종종 모바일 사용자에게 긴 로딩 시간을 의미한다. 장치 화면에 적응하기 전에 사이트의 전체 데스크톱 버전을 로드해야한다. 모바일 사용자에게 표시되지 않는 콘텐츠도 모두 자동으로 로드된다.
또한 모바일 장치의 광범위한 채택에도 불구하고 무선 인터넷 속도는 여전히 느리다. 무거운 이미지 및 비디오와 결합되어 모바일 장치에서 사이트를 사용하기가 매우 어렵다.
- 컷 아웃 기능
반응 형 디자인을 사용하면 다양한 장치에서의 웹 사이트 경험이 크게 달라질 수 있다. 종종 디자이너는 모바일 장치에서 불필요하다고 생각하는 기능을 배제한다. 그러나 이러한 결정은 특히 웹 사이트의 확장 버전을 이미 사용한 경험이있는 사용자의 기대를 깨뜨리기 쉽상이다. 그들은 문제에 대한 해결책을 찾기 위해 사이트를 방문하고, 장치에 관계없이 동일한 기능을 원한다.
사용자를 배려하고 선택권을 준다는 명목하에, Request Desktop 웹 사이트의 모바일 버전에 버튼을 추가하는 것도 절충안이다. 하지만 솔직히 말해서 모바일 버전을 디자인 할 때 귀찮고, 사용자가 그들의 장치에서 콘텐츠를 어떻게 받아들일지에 대한 책임을 지는 것처럼 느껴진다.
- 어색한 사용성
반응형 디자인은 동일한 콘텐츠가 올바른 화면 크기에 최적화되어 있음을 의미한다. 그러나 콘텐츠 경험은 장치별로 달라야한다.
때때로 디자이너는 웹 사이트의 모바일 버전의 콘텐츠와 인터페이스에 충분한 주의를 기울이지 않거나, 크로스 플랫폼 테스트에 참여하지 않는다. 따라서 사용자에게는 콘텐츠가 데스크톱 버전과 동일한 방식으로 표시되기 때문에 긴 페이지를 끝없이 스크롤하고, 탐색 메뉴 계층 구조를 벗어나 불편한 테이블을 탐색해야한다.
반응형 디자인의 실수 수정
- 진정한 적응성
모바일 장치에서 웹 사이트 콘텐츠를 최대화 할 수있는 방법을 고려해라. 열, 탐색, 테이블 등의 포맷은 어떤 모양인가? 단순히 크기를 줄이는 것은 좋은 생각이 아니다. 보다 신중한 접근이 필요하다.
주로 사용자의 요구와, 다른 장치를 사용할 때의 상황 컨텍스트를 고려해라. 페이지에서 사용자의 액션이 이루어져야 할 부분을 강조 표시하고 사용자가 목표에 성공적으로 도달 할 수 있도록 짧고 편리한 경로를 만들어야한다.
- 네비게이션 및 화면
확실히 모바일 장치의 네비게이션은 데스크톱 화면과는 다르다. 사람들이 필요한 정보에 빠르게 액세스 할 수 있도록 모바일 장치의 네비게이션을 단순화해야한다. 이렇게하려면 햄버거 메뉴 뒤에 데스크탑 네비게이션을 숨기지 않도록 탭을 사용해보아라.
사용자는 제스처에 익숙하다. 그들은 카드를 넘기고, 목록 항목을 드래그 앤 드롭하고, 사진을 확대 / 축소하는 것을 좋아한다. 가능하면 네비게이션을 위한 터치 제스처 지원을 설계해서, 조작을 보다 직관적으로 만들어라.
모바일 장치 (스마트폰, 태블릿 및 노트북)의 확산의 다른 측면은 와이드 스크린 디자인에 대한 관심이 감소하고 있다는 것이다. 그러나 데스크톱 컴퓨터는 여전히 인기가 있으며 웹 사이트 페이지를 올바르게 노출시키는 것은 여전히 디자이너의 일이다.
와이드 스크린을 잊지 말아라. 큰 화면에서 사용자는 배경 이미지의 고정된 너비와 측면에 간격이 있는 고정된 너비, 너무 작은 글꼴 크기, 좁은 텍스트 열과 같은 디자인 오류를 알 수 있다.
사용자 기기의 크기에 관계없이 공간을 최대한 활용해야한다.
- 부하 최적화
이미지는 페이지 무게의 최대 50%까지 상당 부분을 차지한다. 웹 사이트 속도를 높이는 가장 쉬운 방법은 이미지를 최적화하는 것이다. 가능하다면 인터페이스에 대한 벡터 그래픽을 만들고, Sketch의 내장 툴 및 타사 서비스를 사용하여 래스터 그래픽을 최적화해라. 또한 개발자와 연락하여 코드를 사용하여 추가 최적화를 위해 이미지를 준비하는 방법에 대해 논의해보아라. 레이아웃을 깨지 않고 이미지가 점진적으로 로드되도록 해라.
- 타이포그래피 및 레이아웃
화면 너비를 줄이면 텍스트 크기를 줄이는 것이 좋다. 그러나 글꼴을 너무 작게 만들면 읽기가 어려워진다. 그리고 너무 많이 늘리면 사용자가 긴 텍스트 줄을 스크롤하고 싶지 않을 것이다. 최적의 가독성을 위해 한 줄당 이상적인 문자 수는 약 60-70자이고, 글꼴 크기는 16px (약 8-10 단어)이다.
Sketch Mirror를 사용하면 레이아웃이 모바일 장치에서 어떻게 보이는지 쉽게 확인할 수 있다. 이 어플리케이션은 편안한 읽기와 페이지 콘텐츠의 쉬운 탐색 사이의 중간 지점을 찾는데 도움을 줄 것이다.
- 테이블 양식
스프레드 시트와 모양은 모바일 용으로 디자인 할 때도 디자이너에게 골칫거리다.
작은 화면에 테이블 데이터를 표시하는 방법에는 여러 가지가 있다. 가로 스크롤을 추가하거나, 데이터를 완전히 재설계하거나, 행을 카드로 바꿀 수 있다. 데이터를 재정렬하고 목록으로 축소하고 화면 가장자리에 고정할 수 있다. 이 중 선택하는 솔루션 유형은 주로 보유한 데이터의 종류에 따라 달라진다.
양식은 휴대폰으로도 쉽게 작성할 수 있어야 한다. 데스크톱 컴퓨터의 한 화면에 맞는 긴 필드 목록 대신, 단계별 위자드를 만들고 UI에서 모바일 패턴을 사용하는 것이 좋다( :필드 위에 제목을 배치하고 포맷을 제출하기 전에 오류를 표시하며, 포맷이 페이지화된 경우 페이지 지정을 수행하는 등)
플랫폼이 아닌 사용자를 위한 디자인
유용한 반응형 웹 사이트를 만드는 가장 좋은 방법은 데스크톱 버전과 동시에 모바일 및 태블릿 디자인을 시작하는 것이다. 장치가 아닌 사용자를 위한 디자인. 사용자는 스마트폰과 컴퓨터에서 다양한 방식으로 문제를 해결할 수 있다. 그러나 플랫폼에 관계없이 사용자를 위한 경험을 디자인하는데 동일한 주의를 기울여야한다.
-
저자 : PlantLabs Inc.
원문 링크: blog.plantapp.io/post/get-rid-of-flaws-in-responsive-design
'ᴜx > ᴀʀᴛɪᴄʟᴇ' 카테고리의 다른 글
| 디자인 검증: 디자인이 좋은지 어떻게 알 수 있을까? (2) | 2020.11.05 |
|---|---|
| 성공적인 디자인 핸드 오프, Design Handoff (0) | 2020.11.04 |
| 2020 Design Tools Survey - UX Tools (0) | 2020.10.27 |
| A/B 테스트의 장점과 단점 (0) | 2020.06.18 |
| 드롭다운(dropdown) 메뉴 디자인 필수 가이드 (0) | 2020.06.17 |
댓글