모바일에서 놀랍도록 웹사이트를 재설계하는 방법
게시 됨: 2016-01-24[ Proto .io는 기업가와 스타트업이 실제 앱처럼 보이고 느껴지는 완전 대화형 사실적인 프로토타입을 만들기 위해 사용하는 모바일 앱 프로토타이핑 도구입니다.]
15년 전 웹사이트 재설계는 훨씬 더 간단한 작업이었습니다. 데스크톱 환경이 어떻게 보일지 결정하고 그에 따라 콘텐츠를 구성하고 웹사이트를 구축하기만 하면 됩니다. 믿을 수 없을 정도로 일부 웹사이트는 별도의 웹사이트 재설계이든 잘 계획된 반응형 디자인이든 여전히 진정한 모바일 경험이 부족합니다.
디자인은 때때로 따라잡기의 끝없는 게임처럼 느껴질 수 있지만 이러한 모바일 앱 전문가는 모든 장치, 데스크톱 또는 모바일에서 멋지게 보이도록 웹 경험을 재설계하는 과정을 안내할 수 있습니다.
멋진 모바일 경험을 위해 웹사이트를 재설계하는 방법
한섬(@HandsomeMade)은 '인간 중심의 모든 차원의 사고'와 '의도적으로 아름답고 유쾌한 소프트웨어'를 핵심 가치로 하는 디자인 및 기술 기업입니다. 크리에이티브 디렉터 Brandon Termini와 기술 디렉터 Alex Zub이 모바일 웹사이트 재설계에 이러한 원칙을 적용하는 방법을 설명합니다.
Termini는 Handsome 웹사이트 재설계의 핵심은 사용자 경험을 최대한 우아하고 사용하기 쉽게 만드는 "모바일 우선 디자인 접근 방식"을 취하는 것이라고 말합니다. "모바일 우선 디자인을 적용하는 한 가지 방법은 더 작은 화면 크기로 시작하는 것입니다. 이렇게 하면 인터페이스를 최대한 단순화하고 가장 중요한 것만 화면에 표시해야 합니다."
Zub은 “대응 가능한 기술 구현과 함께 반응형 디자인 및 적응형 디자인과 같은 기술과 모범 사례를 활용하는 것이 핵심입니다. 많은 제품의 경우 모든 종류의 화면에서 멋진 모양을 유지하면서 구축에 필요한 노력을 단순화하는 반응형 그리드 시스템을 고수하는 것이 합리적입니다.”
모바일에서 아름답게 보이도록 웹사이트를 재설계하는 방법
우리는 Termini에게 그의 비주얼 디자인 베스트 프랙티스 몇 가지를 공유해 달라고 요청했습니다. "우리가 수년 동안 수집한 수백 가지의 해야 할 일과 하지 말아야 할 일들이 있습니다."라고 그는 말합니다. 다음은 그가 잘생긴에 적용하는 세 가지 모범 사례입니다.
- 레이아웃 계층 구조에 신중을 기하십시오. “성공적인 레이아웃이란 사용자가 의도한 순서대로 보고 읽은 내용을 안내할 수 있어야 함을 의미합니다. 여백, 색 이론, 타이포그래피 등을 잘 활용하는 것이 모두 중요한 역할을 합니다.”
- 색상을 적절하게 사용하십시오. “브랜드에 적합한 색상을 선택하고 서로 잘 조화를 이루는지 확인하십시오. 클릭 유도문안 버튼과 같은 중요한 UI 요소와 연결하는 영웅 색상을 사용하세요. 사용자가 인터페이스를 통해 흐르고 막히지 않도록 올바른 위치에서 색상을 아껴서 사용하십시오."
- 타이포그래피는 눈이 편해야 합니다. "타이포그래피가 브랜드에 적합하고 디자인하려는 장치에서 가독성이 좋은지 확인하고 장식용 활자는 드물게 사용하십시오."
모바일 웹사이트 재설계 테스트
물론 모바일 사이트를 구축한 후에는 뛰어난 사용자 경험을 보장하기 위해 속도를 높여야 합니다. Termini는 “자주 테스트하고 조정하는 것이 중요합니다. 잠재적인 사용자와 함께 손으로 그린 첫 번째 스케치를 표시하는 즉시 테스트를 시작하고 완전히 구축된 설계 시스템에 이르기까지 프로세스 전반에 걸쳐 테스트를 계속하십시오. 피드백을 듣고 합성하고 반복할 수 있도록 설정하는 것은 모든 제품의 성공에 매우 중요합니다."
당신을 위해 추천 된:
인도 스타트업에 대한 반 영리 조항은 무엇을 의미합니까?
Edtech Startup이 인도 인력의 기술 향상 및 미래 준비를 돕는 방법...
이번 주 새로운 시대의 기술 주식: Zomato의 문제는 계속되고 EaseMyTrip은 Str...
인도 스타트업, 자금 조달을 위해 지름길 선택
디지털 마케팅 플랫폼 Logicserve, INR 80 Cr 자금 지원, LS Dig...
Lendingtech Space에 대한 갱신된 규제 조사에 대해 경고하는 보고서
Zub은 “품질 보증은 다양한 종류의 장치에서 사용되는 제품을 구축하는 데 필수적인 부분입니다. 사무실에 가능한 모든 장치를 두는 것은 사실상 불가능하기 때문에 클라우드에 있는 수십 개의 '가상' 장치에 대한 액세스를 제공하는 온라인 서비스를 사용하여 최대한 자동화합니다. 적절한 자동화 투자를 통해 향후 교차 장치 테스트를 쉽고 빠르게 수행할 수 있습니다."
우리는 모바일 웹사이트 재설계를 테스트하고 QA하는 방법에 대해 더 배우고 싶었습니다. 이에 대해 Crowdsourced Testing(@crowdsourcingqa)의 CEO인 Simon Papineau에게 들었습니다. Papineau는 수많은 모바일 앱, 웹사이트, 게임 등을 테스트하면서 겪었던 고충을 해결하기 위해 Crowdsourced Testing을 만들었습니다.
데스크톱에서 작동하는 것이 모바일에서 항상 작동하는 것은 아닙니다. 그 반대도 마찬가지입니다.
Papineau는 다음과 같이 말합니다. 모바일 사용자의 의도, 마음가짐, 목적은 완전히 다릅니다. 방문자는 전화로 회사의 역사와 작은 글씨에 대해 읽는 데 20분을 소비하지 않을 것입니다.
대신, 그들이 원하는 것을 가능한 한 직접적이고 빠르게 제공하십시오. 연락처라면 보잘 것 없이 바로 홈페이지에 올리세요.”
Papineau는 과제 중 하나가 모바일 웹사이트 재설계가 다양한 장치에서 보기 좋게 보이고 잘 수행되도록 하는 것이라고 말합니다. 회사가 할 수 있는 최선의 방법은 방문의 대부분을 차지하는 상위 15-20개 장치에 집중하는 것입니다. 사이트가 완벽해 보이지 않는 모바일 장치는 항상 있을 것입니다. 그러나 해당 장치가 방문자의 0.05%를 차지한다면 추가 개발 노력을 기울일 가치가 없을 것입니다.”
반응형 디자인을 사용하여 웹사이트를 다시 디자인하는 방법
Bob Bentz는 여러 산업 분야의 고객을 위해 웹사이트 재설계를 감독하는 풀 서비스 모바일 마케팅 대행사인 ATS Mobile(@atsMobile)의 사장입니다. Bentz는 웹사이트 경험이 고해상도 데스크탑 모니터에서와 마찬가지로 모바일 장치에서도 잘 보이도록 하는 데 열정적이며 ATS Mobile이 클라이언트를 위해 이를 달성하는 주요 방법 중 하나는 반응형 디자인을 사용하는 것입니다.
왜 반응형 디자인인가? 입문서
Bentz는 "가장 일반적으로 HTML5로 디자인된 반응형 웹 디자인(RWD)은 거의 모든 새로운 모바일 웹 빌드에서 선택될 것입니다."라고 말합니다. “CSS3와 Javascript를 사용하여 설계할 수도 있습니다. 반응형 디자인은 모든 장치를 수용할 수 있도록 유동적으로 변경되므로 매우 유연하다는 놀라운 이점이 있습니다. RWD는 장치에 관계없이 동일한 코드를 보낸 다음 클라이언트 측에서 재배열하여 모든 장치에서 동일한 웹페이지를 표시하는 방식으로 작동합니다."
반응형 디자인이 실제로 작동하는지 확인하려면 이 블로그 게시물을 데스크톱 화면에서 가져오세요. 아직 하지 않았다면(기다립니다!). 사용자 인터페이스가 "중단"되고 자체 재정렬되는 여러 창 크기가 있으므로 사용하는 장치(및 해당 장치 내부의 창 크기)에 따라 페이지가 다르게 표시됩니다.
그렇다면 반응형 디자인은 정확히 어떻게 작동하며 웹사이트 재설계에 왜 사용해야 할까요? Bentz는 "반응형 웹사이트 재설계는 사용자의 기기가 데스크톱, 태블릿, 패블릿, 스마트폰, 피처폰 또는 웨어러블(예: Apple Watch)인지 여부에 관계없이 동일한 URL에서 동일한 HTML 코드를 제공합니다. “또한 사이트의 화면 크기에 따라 다르게 반응할 수도 있습니다. 개발자는 모바일 및 태블릿 사용자에게 사용할 그래픽과 콘텐츠를 결정할 수 있습니다. 텍스트와 이미지는 브라우저나 화면 크기에 따라 조정할 수 있습니다."
반응형 디자인을 사용하면 모바일 장치 상태가 변경될 때마다 새로운 업데이트를 수행하지 않아도 됩니다. Bentz는 "새로운 장치가 시장에 출시되어 웹사이트에 액세스할 때 사이트가 반응형 디자인을 기반으로 구축된 경우 추가 프로그래밍이 필요하지 않습니다."라고 말합니다. “그러나 가장 중요한 것은 반응형 디자인이 Google에서 권장하는 디자인 모범 사례라는 것입니다. 많은 웹사이트에서 RWD는 모바일 친화성과 구현 용이성 사이에서 합리적인 균형을 이루고 있습니다.”
반응형 시각 디자인의 모범 사례
Bentz에 따르면 다음 모범 사례를 고려하면 반응형 웹사이트 재설계가 최상의 상태로 보이고 작동하도록 도와줍니다.
- 간단하고 눈에 띄는 헤더입니다. “헤더와 마스트헤드는 핵심 판매 포인트에서 벗어나지 않도록 단순해야 합니다. 로고는 핵심 브랜드 이미지입니다. 너무 가로로 된 로고는 작은 세로 화면에서 잘 보이지 않을 수 있습니다."
- 사용하기 쉬운 탐색. “작은 화면에서는 탐색이 훨씬 더 까다롭습니다. 종종 디자이너는 일반적으로 사이트의 오른쪽 상단에 있는 세 개의 수평선으로 표시된 탐색 버튼을 사용합니다. 만두로 둘러싸여 있는 모습이 마치 버거처럼 생겼다고 해서 '햄버거 메뉴'라고 불립니다. 일부 사이트는 화면 대부분을 덮기 위해 바깥쪽으로 확장할 수 있는 왼쪽 탐색 기능을 사용합니다."
- 많은 이미지. “모바일 화면에 너무 많은 이미지를 담기는 어렵지만, 단어가 UI를 순식간에 압도할 수 있습니다. 따라서 디자이너는 화면을 카피로 비좁게 만드는 대신 사용자가 여러 제품 이미지를 스와이프할 수 있는 이미지 캐러셀을 사용하는 경우가 많습니다.”
- 바닥글의 지능적인 사용. “소비자들은 바닥글을 탐색 도구로 사용하는 데 익숙하며 위의 접힌 머리글만큼 귀중한 공간을 차지하지 않습니다. 또한 매우 중요한 '문의하기' 링크도 포함해야 합니다.”
멋진 웹사이트 재설계는 멋진 프로토타입으로 시작됩니다
모바일용 웹사이트를 재설계하는 방법을 배우는 것은 결코 쉬운 일이 아니지만 경험을 테스트하는 데 도움이 되는 강력한 신속한 프로토타이핑 도구를 사용하는 것이 가장 큰 차이를 만듭니다. 사본을 다듬고 요소를 줄이고 탐색 체계를 파악한 후에는 모바일 웹사이트 재설계가 여전히 사용 가능하고 직관적인지 여부에 대한 사용자의 피드백을 빠르게 얻을 수 있습니다. 그런 다음 Termini가 제안한 대로 진정으로 자랑스러운 프로토타입을 얻을 때까지 계속 반복하세요.