Responsive Web Deisgn_2
UX 고민하기_15 Best Practices for web design
지난번에 이어서 기사 정리하기
원본 출처
> http://www.incomediary.com/best-practices-responsible-responsive-web-design
6. 모바일 상단에 중요한 정보를 배치하라.
전화번호, 연락처 정보, 액션 호출 등을 모바일 상단에 보여줘라.
모바일 사용자는 어떤 기기에서든 잘 동작하고 빠르게 정보를 보기를 원한다.
지금은 브라우저 사이즈는 다양해졌고 '고정'이라는 생각은 더 이상 존재하지 않는다.
주요 동작을 호출하는 것을 상단에 배치하는 것은 여전히 중요하다.
예로, 온라인 쇼핑몰 페이지에서는 '장바구니 추가하기' 버튼이 사용자가 스크롤 없이도, 주요 시야에서 보이도록 하는 것이 중요하다.
Metris Kitchens 홈페이지Metris Kitchens은, 사용자가 연락처 그리고 (브로셔를 요청하기 위한) 전환 동작들을 빠르고 명확하게 볼 수 있도록 주요 정보를 정보를 모바일 상단에 위치해 놓았다.
Ebay는 가격과 [지금 구매하기] 버튼을 명확하게 볼 수 있도록 배치하였다.
7. 작은 화면에서 콘텐츠들이 분산될 때, 콘텐츠 블록들의 순서를 바꾸어라
콘텐츠 순서가 바뀔 때, 작은 화면에서 어떤 정보가 더 중요하고 우선적으로 보일지 결정해라.
이것은 CSS를 통해서 구현 가능하다.(레이아웃이 너무 복잡할 경우, 종종 JS)
만약에 PC에서 텍스트와 이미지가 같이 배치되어 있다면, 무엇이 더 중요한지 결정하라.
또는, 화면에 사이드바와 콘텐츠 영역이 같이 있는 경우, 모바일 화면에서는 사이드바가 우선되고 콘텐츠 영역은 밑으로 내려갈 것이다. 그러면 이것은 모바일에 적절하게 바뀌는 것이다.
Brouwn Thomas 페이지Brown Thomas 모바일 페이지에서 제품의 정보가 첫 번째로 위치해 있다.
PC 화면에서는 라이프스타일 사진 옆에 위치하는 것으로 바뀌어서 표시된다.
The Melanie FThe Melanie F 제품 상세 페이지에서, 모바일 화면에서는 제품 사진이 첫 번째로 보인다.
반면에 PC 화면에서는 제품 정보가 제품 옆에 표시된다.
8. 작은 화면에서는 콘텐츠를 숨겨라
당신은 큰 화면에서는 보이지만, 모바일에서는 완벽하게 숨기거나, 탭 방식으로 보였다 숨기는 방법 등으로 모바일의 레이아웃을 더 심플하게 할 수 있다.
작은 화면에서 이러한 방식의 페이지들은 사용자에게 주요 정보를 보게 하고 원하면 더 보게 하는 옵션을 제공한다.
Christianlouboutin.comchristianlouboutin.com는 헤더와 제품 정보를 줄여 제품 사진을 첫 번째로 보여주며 해당 페이지를 단순화했다.
SelfridgesSelfridges에서 옆 썸네일 이미지들을 모바일에서는 삭제하고 Swipe 할 수 있도록 단순히 좌/우 화살표만 남겨놓았다.
9. 더 넓은 화면에는 더 많은 콘텐츠를 보여줘라
더 넓은 화면은 당신에게 더 많은 콘텐츠를 보여줄 수 있게 할 것이다. 사용자가 스크롤하기 전에 더 많은 콘텐츠가 사용자들에게 바로 보일 것이다. 레이아웃은 확장되어 더 많은 열을 제공할 것이다.
Jimmy CleesonJimmy Gleeson의 포트폴리오 그리드 보기는 스크린이 넓을수록 보이는 아이템 개수가 늘어난다.
Smashing MagazineSmashing Magazine의 내비게이션 레이아웃은 꽤 복잡하고 다양한 화면 크기에 맞추어 변화한다.
이것은 각 기기와 화면 크기에 따른 레이아웃과 공간을 최대한 활용하는 방법을 고민하는 것의 좋은 예시이다.
10. 세로 모드의 태블릿을 잊지 마라.
종종, 세로 방향(포트레이트)을 좀 더 기본적이고 모든 공간을 사용하지 않는 모바일 화면에서 빠뜨리는 경우가 있다. 그렇지 않다면 PC 레이아웃에서 모든 콘텐츠를 빡빡하게 하여 답답하게 할 수도 있다.
당신의 CSS에서 좋은 Media 쿼리를 사용하면 레이아웃은 괜찮을 것이다.
Protest이 Protest의 상품 상세 페이지의 레이아웃은 공간이나 비율이 바뀌지 않고 여전히 더 적은 공간에 많은 정보를 가지고 있다.
FireboxFirebox 제품 상세 레이아웃은 세로 모드에 어떤 것도 타협하지 않는다. 가로모드(Desktop)에서 보이는 모든 것이 여전히 균현이 맞추며 간단한 방법으로 그대로 보인다.
11. 크나큰 이미지는 스크롤 가능한 페이지들로 변경하라
만약에 화면을 채우는 이미지로 디자인했다면, 작은 기기에서는 큰 이미지가 생각한 대로 보이지 않을 것이다.
이미지 갤러리들을 위해서, 스크롤 가능한 페이지나, 좌우로 Swipe 가능한 페이지를 사용하여라.
길 게스 크롤 되는 갤러리는 태블릿이나, 데스크톱에서도 잘 보인다.
Apple이 Apple의 갤러리 이미지는 모바일에서도 스크롤되는 페이지를 사용하고 있다. 그림 설명은 모바일에서 삭제하여 더 레이아웃을 심플하게 하였다.
UrbanEarsUrbanEars의 제품 이미지는 같은 페이지를 보여주고, 링크를 누르면 아래로 확장된다.
이것은 기본 요소인 팝업을 새로운 페이지에 표시하지 않고, 좀 더 효율적인 방법으로 이미지들을 더 잘 보여준다.
12. 터치에 적합한 UX를 고려하라
배너와 메뉴, 이미지 갤러리 등에 swipe를 추가하라
터치 스크린은 자연스럽게 직관적으로 사용할 수 있다.
그러므로 우리는 내비게이션 가이드를 통해 좀 더 쉽게 인지할 수 있다.
예로 화면에 이미지의 절반을 보여주어 다음에 더 콘텐츠가 있다는 것을 알려줄 수 있다.
마우스 오버 인터페이스는 터치 스크린에 일관성을 갖지 않는다.
마우스 오버 동작들을 터치 이벤트로 대체하라.
만약에 콘텐츠가 마우스 오버 시에 보이는 것이 중요하지 않다면, 단지 꾸밈 요소라면 그러면 이런 것은 터치스크린에서 모두 불가능하다.
The Born Group's Porfoliothe Born Group’s portfolio 페이지의 마우스 오버는 데스크톱에서는 동작하며 프로젝트의 타이틀을 보여줬었다.
이러한 정보가 터치스크린에서도 여전히 진입하는데 있어서 필요하기 때문에 터치 이벤트로 대체되었다.
한번 터치하면 정보가 보이고, 한 번 더 터치하면 프로젝트를 보여준다.
The MadeThe Made 사이트는 홈 화면 배너에 swipe 이벤트를 추가하였다.
그들은 명확하게 그들의 사용자를 생각하고 있고, 이러한 터치 이벤트를 사이트에서 제품의 일부분을 보여줌으로써, 해당 부분에서 자연스럽게 swipe 하도록 하게 한다.
13. 적은 이미지를 사용하라
그러데이션 배경 화면이나 마우스 오버 버튼 같은 많은 효과들은 순수한 html & css에서 가능하게 되었다. 특히 모바일 환경을 고려하여 페이지 로딩이 더빨라기고, 많은 그래픽을 만드는 시간이 절약될 것이다.
폰트와 아이콘을 사용하는 것은 이미지로 제작하면 안 된다.
그것은 크기가 조절 가능하며 깨끗한 에지를 갖고 있으며 더 빠르고 레티나 디스플레이에 더 적합하다.
이러한 최적화 작업은 모든 기기와 화면에서 더 훌륭하게 동작할 것이다.
The Desk.comThe desk.com 사이트는 폰트를 아주 잘 사용하고 있다.
폰트 컬러를 바꾸는 것처럼 간단한 컬러를 추가하여 페이지에 좀 더 임팩트가 있도록 하였다.
The Pretty Green EnergyThe Pretty Green Energy 사이트는 헤더 영역에 큰 아이콘 폰트를 사용하고 있다.
아이콘 폰트의 사이즈를 키우는 것은 특별히 이미지를 편집할 필요 없이 간단하다.
14. 반응형 비디오
이 방법은 비디오가 특정 높이와 넓이 사이즈를 고정하는 것이 아니라, 어떤 기기의 화면에도 자동으로 반응하도록 한다. 이건은 css 몇 줄을 추가하여 가능하다. 이것은 페이지와 iframes에 바로 넣은 비디오에게 효과적으로 동작한다.
AnyiluAnyilu의 비디오는 페이지 전반적으로 펼쳐져 보인다. 이것은 페이지에 큰 임팩트를 준다. 그리고 각기 다른 사이즈의 화면에서도 자동적으로 반응하여 보인다.
Brown ThomasBrown Thomas에 삽입된 비디오는 frames과 전체적으로 반응형으로 사용하고 있다. 이것은 특정 가로와 높이의 사이즈가 없으며 페이지 구성이 빠르고 콘텐츠가 관리가 쉽다.
15. The fold는 더 이상 존재하지 않는다.
기기는 점점 작아지고 넓어지고 길어지고 커진다.
페이지 상단에 모든 것을 구겨 넣는 것이 중요해지지 않게 되었다.
페이지들은 길게 확장되었고 모든 콘텐츠 블록들이 넓은 공간에 표시된다.
사람들은 자연스럽게 스크롤한다.
더 많은 콘테츠를 접어서(folding) 제공하면 사용자들이 좀 더 페이지에 집중하고 콘텐츠를 읽도록 할 수 있다.
AppleiMac 제품의 페이지는 길고 많은 스크롤을 하게 하며 경험하게 한다. 그들 역시 지금 구매하기 같은 버튼을 상시 보여주는 것 같이 고정된 내비게이션을 사용하여 언제든지 동작을 실행할 수 있게 한다.
SonosSonos 제품 페이지는 가로 고정의 콘텐츠와 반응형 텍스트 박스를 조화롭게 사용하고 있다. 이것은 페이지가 흥미롭고 당신이 스크롤하게 한다. 복잡하지 않게 잘 조화된 공간을 보여준다.
종합하여, 분석 자료를 확인해봐라.
당신이 생각하는 것보다 모바일 트래픽이 높을 것이다. 그리고 앞으로 더욱 성장할 것이다.
만약에 당신의 사이트가 반응형이 아니라면, 모든 모바일 사용자는 당신의 사이트에서 나쁜 경험을 할 것이다.
