최고의 PWA 디자인을 위한 주요 UI 고려 사항

게시 됨: 2019-05-30

아직 PWA에 대해 들어본 적이 없다면 먼저 다음 사항에 대해 알아보아야 합니다. “PWA란 무엇입니까? 프로그레시브 웹 앱에 대해 알아야 할 모든 것” . 요컨대, 그들은 전통적인 것들에서 제공되는 경험보다 훨씬 우수한 사용자 인터페이스와 경험을 제공하려는 의도로 만들어진 웹 애플리케이션입니다.

이 기사에서는 PWA를 설계할 때 가장 중요한 UI(사용자 인터페이스) 문제를 제안합니다. 귀하의 프로그레시브 웹 애플리케이션에 가장 적합한 사용자 인터페이스를 가질 수 있는 방법을 알아보려면 계속 읽으십시오.

시스템 글꼴

사용자가 PWA(Progressive Web App)를 사용하는 동안 편안함을 느끼도록 하려면 운영 체제(OS)에 맞게 스타일을 약간 개선해야 합니다. 플랫폼마다 다른 메뉴와 버튼을 구현하기 전에 iOS, Android, Windows에 대해 별도로 시스템의 기본 글꼴로 시작할 수 있습니다.

즉, Microsoft(Segoe), Google(Roboto), Apple(San Francisco) 또는 Mozilla(Fira Sans)의 노력으로 사용자의 경험을 향상시켜 작업을 더 쉽게 만들 수 있습니다. 결과적으로 시스템 글꼴은 목록에서 절대 빠지면 안 되는 항목 중 하나입니다.

 /* iOS */
글꼴 패밀리: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* 안드로이드 */
font-family: 'RobotoRegular', 'Droid Sans', sans-serif;

/* 윈도우 폰 */
font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;

앱 아이콘

모바일 앱 디자이너들이 아이콘 디자인에 특별한 관심을 기울이는 것은 사실입니다. PWA(홈 화면에 추가하여)는 나머지 기본 앱 옆에 위치하므로 아이콘 디자인도 고려해야 합니다.

여기에는 좋은 이유가 있습니다. 첫인상은 항상 매우 중요하며 앱의 아이콘은 사용자에게 주는 첫인상입니다. 설명하자면 사용자는 휴대전화의 기본 앱 아이콘 가운데 다른 모양의 아이콘을 탭하는 것을 주저할 수 있습니다.

PWA 아이콘이 기기의 나머지 앱과 혼합되도록 하려면 Android, iOS 및 Windows와 같은 다양한 플랫폼에 맞게 유연해야 하고 스타일 요소(모양, 배경이 있거나 없는 모양)를 수용해야 합니다. 또는 다른 색상 등). 이를 위한 좋은 방법은 PWA의 아이콘 디자인을 기본 앱 아이콘의 시각적 표준과 일치시키거나 최소한 그에 가깝게 만드는 것입니다. 영감의 원천 중 하나는 Google의 Material Design 가이드라인 Google의 Material Icons입니다.

 추천 자료: PWA vs. 네이티브 앱: 어느 것이 더 잘 어울리나요?

터치 상호 작용

터치 상호 작용은 매우 잘 구현되거나 전혀 구현되지 않아야 합니다.

Michael B. Myers Jr.의 기어 구동식 당겨서 새로고침 애니메이션

이것이 실제로 불가능한 것은 아니지만 "스와이프하여 해제" 또는 "당겨서 새로 고침"과 같은 고급 터치 상호 작용을 통합하는 것은 너무 어렵습니다. 이러한 상호 작용이 사용자를 놀라게 할 것이라고 생각하지만 이는 예상대로 작동하는 경우에만 해당됩니다. 그렇지 않으면 곤경에 처한 것입니다.

PWA에 고급 터치 상호 작용이 필요한 경우 실제 장치에서 잘 작동하는지 확인하십시오. 일반적으로 이것은 다른 사람이 훌륭한 react-swappable-view와 같이 많은 노력을 들여 개발한 이 기능의 구현을 발견했음을 의미합니다.

한편, 디자인을 수정하여 이 문제를 완전히 피할 수 있습니다. 이렇게 하면 고급 터치 상호 작용을 제안하지 않습니다. 예를 들어 탭 대신 하단 탐색 탭을 사용할 수 있습니다.

공유 가능한 콘텐츠

Progressive Web Apps의 경우 현재 URL에 쉽게 액세스할 수 없는 경우가 많습니다. 따라서 사용자가 보고 있는 내용을 쉽게 공유할 수 있도록 해야 합니다. 공유 버튼 을 통합하여 사용자가 URL을 클립보드에 복사하여 저명한 소셜 네트워킹 사이트에서 공유할 수 있습니다.

이 경우에 대한 작은 팁: 소셜 공유 버튼을 구현하는 경우 페이지의 기본 콘텐츠가 로드될 때까지 타사 JavaScript의 로드를 지연해야 합니다.

터치 피드백

첫째, 탭할 수 있는 영역은 터치 피드백을 제공해야 합니다 . 버튼이나 탭 가능한 영역을 탭할 때 사용자는 탭이 인식되었는지 궁금해 해서는 안 됩니다.

탭이 인식되었음을 즉시 명확히 하는 것을 목표로 하십시오. 예를 들어, 탭된 영역을 (밝은) 회색으로 강조 표시하거나, 재료 잔물결을 표시하거나, 페이지 전환이 즉시 시작되도록 하여 이를 수행할 수 있습니다.

터치 피드백이 잘 수행된 예:

Google I/O 2016 웹 앱은 대화를 탭하고 기본 파란색 탭 색상이 비활성화되어 있는 경우 즉시 회색 강조 표시를 제공합니다(기본적으로 일부 브라우저는 요소를 탭할 때 고유한 강조 표시를 표시합니다. 이 기본 스타일은 매력적이지 않으며 사용자와 충돌할 수 있습니다. 브랜드 시각적 품질).

둘째, 스크롤하는 동안 요소를 터치해도 터치 피드백이 트리거되어서는 안 됩니다 .

터치 피드백을 구현할 때마다 사용자가 페이지를 스크롤하기 위해 요소를 터치할 때만 실수로 트리거되지 않는 것이 중요합니다.

잘못된 시간에 제공된 터치 피드백의 예:

인기 있는 Material-UI 라이브러리의 초기 버전은 스크롤하는 동안 터치할 때 터치 가능한 요소에 잔물결을 유발했습니다.

사용자의 터치 위치가 처음 수백 밀리초 내에 어떤 방향으로든 6픽셀 이상 이동한 경우 잔물결 애니메이션을 중단하여 문제가 수정되었습니다.

이전 목록 페이지에서 스크롤 위치 유지

세부 정보 페이지에서 뒤로 누르면 이전 목록 페이지의 스크롤 위치가 유지되어야 합니다.

사용자가 세부 정보에서 뒤로 누를 때 페이지는 이전 목록 페이지의 스크롤 위치를 유지해야 합니다. 사용자가 목록에서 항목을 선택하고 세부 정보를 볼 때 뒤로 탭해도 목록의 맨 위로 가져오면 안 됩니다. 주요 목표는 사용자가 탭하는 동안 항목을 누르기 전에 있던 "동일한 스크롤 위치"로 목록 페이지로 돌아가야 한다는 것입니다.

결국 뒤로를 누르면 사용자가 목록의 맨 위로 다시 이동하면 제품, 기사 또는 기타 항목 목록을 탐색하기가 어려워집니다.

분명히 사용자에게 탐색을 더 어렵게 만들면 사용자는 다시 돌아오지 않는 경향이 있습니다.

지나치게 "웹과 같은" 디자인을 피하십시오.

"클래식" 웹 디자인은 텍스트의 링크와 머리글 및 바닥글과 같은 모든 페이지에서 사용할 수 있는 정적 요소에 크게 의존합니다. 실제로 이러한 디자인 요소는 네이티브 앱에서 거의 찾아볼 수 없으므로 사용자의 멘탈 모델과 일치시키기 위해 이러한 요소를 피하고 대신 앱과 유사한 디자인을 사용하는 것이 좋습니다.

예를 들어 링크는 드물게 사용해야 합니다. 버튼이나 탭할 수 있는 영역을 주의해서 배치해야 합니다.

어두운 테마

어두운 테마는 계속 유지되며 점점 더 좋아질 것입니다.

Android 개발자에 따르면 어두운 테마에는 많은 이점 이 있습니다. 전력 사용량을 상당히 줄일 수 있습니다(기기의 화면 기술에 따라 다름). 저시력 사용자와 밝은 빛에 민감한 사용자의 가시성을 향상시킵니다. 저조도 환경에서 누구나 쉽게 장치를 사용할 수 있습니다.

어두운 UI의 접근성과 눈부신 색상의 감성적인 반응 사이에서 균형을 찾는 사람들이 내년에 1위가 될 것입니다. 도움이 될 수 있는 Google Material의 가이드가 있습니다.

결론적으로

프로그레시브 웹 앱은 개발자가 전화기에서 사용자에게 직관적인 웹 경험을 제공할 수 있도록 하는 시대의 필요입니다. 이러한 권장 사항을 구현하기만 하면 사용자가 PWA를 사용하는 동안 앱과 유사한 훌륭한 인터페이스와 경험을 쉽게 제공할 수 있습니다.

SimiCart는 귀하의 모든 PWA 관련 질문과 요구 사항에 답변해 드립니다. 특히 전자 상거래 웹 스토어를 위한 완벽한 Magento PWA 솔루션을 찾고 있는 온라인 판매자를 위해 당사는 귀하와 귀하의 상점을 위한 완전하고 비용 효율적인 솔루션을 제공합니다.