차례
Netflix 및 Google Drive와 같은 웹 앱의 일일 사용자 수가 수백만 명에 달하는 이유는 그들이 제공하는 서비스 때문만이 아니라 플랫폼도 사용하기 매우 쉽습니다.
진실은 사용자 친화적이라는 표현이 웹 앱 디자인에서 자주 사용되는 표현이라는 것입니다. 그러나 이것이 실제로 애플리케이션과 사용자에게 무엇을 의미하며 어떻게 할 수 있습니까? ~를 성취하다?
당신이 가장 좋아하는 웹 앱을 생각해 보세요. 당신이 가장 좋아하는 이유는 무엇입니까? 그것은 어떻게 생겼나요? 어떻게 흐르나요? 이제 사용하기 시작했지만 실제로는 사용해 본 적이 없는 웹 앱을 생각해 보세요. 왜? 레이아웃이 너무 혼란스러웠나요? 전문용어가 너무 구체적이었나요? 로딩시간이 너무 느리나요? 이러한 질문에 대한 귀하의 답변은 다음의 효과를 드러낼 것입니다. 웹 앱의 UI/UX 디자인. 웹 앱을 비즈니스 목표와 구매자의 요구 사항에 시각적으로 매력적인 방식으로 연결하는 데 도움이 되는 UI/UX 디자인에 대한 몇 가지 주요 팁을 살펴보겠습니다.
UX와 UI: 디자인의 파트너십
사용자의 요구 사항과 회사의 목표를 이해하는 것이 진정한 목표를 달성하기 위한 첫 번째 단계입니다. 사용자 친화적인 앱 디자인. 어떻게 합니까? 먼저 UX와 UI 디자인의 관계를 이해해야 합니다.
사용자 경험(UX) 디자이너는 업계 분석과 사용자 피드백을 활용합니다. 이를 창의적인 전문 지식과 업계 동향에 대한 지식과 결합하여 구매자의 경험을 더욱 즐겁게 만듭니다. UX 디자인 선택은 앱의 모양, 기능 및 목적에 영향을 미칩니다. 매우 성공적인 UX 디자이너는 공감 능력이 뛰어납니다. 그들은 사용자의 요구를 진정으로 반영하는 방식으로 디자인합니다.
UX 디자이너가 기능적이고 일관된 청사진을 갖고 나면 UI(사용자 인터페이스) 디자이너는 앱의 시각적 매력을 고려합니다. 스타일, 색상, 질감 및 사용자가 기능과 상호 작용하는 방식에 중점을 둡니다. 사려 깊고 반응이 빠른 웹 애플리케이션을 만들려면 다른 하나가 없으면 작동하지 않습니다. 대부분의 웹 디자이너는 편리하게 UI 및 UX 디자인 작업을 모두 실행할 수 있습니다.
이제 둘 사이의 관계를 살펴보았으므로 웹 앱을 가장 친숙하게 만들기 위한 UI/UX 디자인에 대한 9가지 필수 팁을 살펴보겠습니다.
UI 디자인 팁: 항상 표지로 책을 판단하세요
인간은 무언가를 보는 순간 순식간에 판단을 내립니다. 이는 인간의 본성입니다. 따라서 웹 앱을 처음 보는 순간부터 접근성이 좋고 시각적으로 매력적으로 만들어 사용자의 관심을 사로잡으세요. 디자인 측면에서 가장 혁신적인 방법을 찾으려 애쓰기보다는, 페이지를 만들기 전에 정보 구조와 기본적인 사용자 흐름을 고려하는 것이 중요합니다. 다음은 간소화된 정보 구조의 간단한 예시입니다. 웹 앱 아키텍처.
완벽한 비율을 찾으려면 팀 및 사용자와 함께 모든 기본 요소를 논의하고 테스트하고 반복하십시오.
“디자이너로서 당신은 사용자가 새로운 디자인 패턴을 해석하기보다는 인식하기를 원합니다. 이를 통해 타겟 청중의 시간을 절약할 수 있을 뿐만 아니라 콘텐츠에 대한 접근성을 더욱 높일 수 있습니다.” 스코픽 디자이너 프란시스 푸홀스
색상, 아이콘 및 배치가 메시지를 정확하게 전달하거나 메시지를 완전히 변경할 수 있는 방법을 고려하세요.
- "이것을 먼저 읽으십시오!” 저렇게 빨간색으로 쓰여진 글을 클릭했다면 어떤 내용일 것 같나요? 대부분의 사람들은 그것을 경고나 부정적인 것으로 간주할 것입니다. 그것이 바로 마음이 그것을 해석하는 방식입니다. 그러므로 색상을 선택할 때 이 점을 염두에 두시기 바랍니다. 또한, 색맹 및 저시력 사용자도 고려해야 합니다.
- 아이콘이 실제 세계(특히 웹 앱이 대상으로 삼는 사용자 커뮤니티)에서 무엇을 나타낼 수 있는지 생각해 보세요.
- 인간의 눈이 따라갈 수 있도록 자연스러운 배치와 흐름을 고려하십시오.
UI 디자인 팁: 사용자가 더 빠른 결정을 내릴 수 있도록 지원
웹 앱의 탐색 도구는 사이트의 간단한 목차 역할을 해야 합니다. 관련 요소를 함께 그룹화하여 구조를 간소화하세요. 피트니스 웹 앱에서 작업하는 경우 심장 강화 운동과 플라이오메트릭 운동에 대한 두 가지 메뉴 옵션이 필요하지 않습니다. 메뉴 항목의 표준 개수는 5~8개입니다. 이는 메뉴 옵션의 수에 따라 의사 결정 시간이 어떻게 영향을 받는지 설명하는 힉의 법칙(힌트: 선택 항목이 많을수록 시간이 길어짐)을 기반으로 합니다.
전문가 팁: 신규 사용자에게는 필요할 때 웹 앱을 안내하는 도구 설명이 제공되어야 합니다. 이는 사용자가 압도되어 앱을 종료하고 대안을 찾지 않도록 보장합니다. 사용자가 이러한 도구 설명을 건너뛸 수도 있는지 확인하세요. 어떤 사람에게는 유용한 것이 다른 사람에게는 짜증나는 일이 되는 것을 원하지 않습니다. 이 단계에서 사용자 경험에 따라 구매 여부가 결정되므로 앱에 무료 평가판이 있는 경우 이는 특히 중요합니다.
UI 디자인 팁: 엄지손가락으로 살펴보는 것을 고려하세요.
와이어프레임 작업 시 사용자가 와이어프레임과 상호 작용하는 방식을 고려하세요. 모바일 친화적 웹 앱 버전. 스크롤할 수 있는 더 많은 공간을 제공하는 웹사이트와 달리 모바일 사용자는 손가락만으로 탐색할 수 있습니다. 따라서 엄지손가락으로 쉽게 클릭할 수 있는 버튼을 디자인하세요. 사용자가 휴대폰 키보드로 작성할 수 있는 양식을 만듭니다. 그리고 마우스 오버 상태가 불가능한 작은 화면에서도 쉽게 소화할 수 있는 간결한 정보를 제공합니다.
디자인하는 각 장치에 권장되는 버튼 크기를 고려하세요. (출처)
UX 디자인 팁: 복귀 사용자를 위한 디자인
새로운 사용자를 위한 지원이 필요한 것처럼 재방문자를 위한 디자인을 할 때 효율성과 개인화를 염두에 두세요. 고객의 59 % 과거 상호 작용을 기반으로 한 맞춤형 참여가 비즈니스 성공에 매우 중요하다고 말합니다. 당신이 피트니스 앱 개발 예를 들어 여행 중에는 운동을 없애는 것이 좋습니다. 사용자가 선택하지 않았거나 관심을 보이지 않은 것입니다.
재방문자의 경험을 최대한 간소화되고 개인화되며 효과적으로 만들 수 있는 방법을 고려하세요. 여기에는 재사용자에게 웹 앱에 로그인 정보, 결제 정보, 자동 채우기 양식을 저장할 수 있는 옵션을 제공하는 것이 포함될 수 있습니다. 사용자의 개인 취향에 따라 추천을 제공하면 사용자가 앱과 더욱 정서적으로 연결될 것입니다.
UX 디자인이 이 흐름에 어떤 영향을 미치는지 확인하세요. 자동차 판매 웹 앱 Scopic 팀이 개발한 것입니다. 이 다중 채널 마케팅 플랫폼의 모든 사용자는 고유한 목록과 개별 고객 그룹에 맞는 맞춤형 작업 계획을 만들 수 있습니다. 이는 영업팀이 잠재적인 리드에 더 빨리 도달하는 데 도움이 될 뿐만 아니라 스스로 개인화된 워크플로우를 만들 수 있게 해줍니다. 이를 통해 시간이 절약되고 사용자 경험이 더욱 자연스럽게 느껴집니다.
UX 디자인 팁: 모든 사용자를 위해 일관성 유지
당신과 당신 사이에는 항상 차이가 있을 것입니다. 웹앱 모바일 친화적 버전이지만 둘 다 인식 가능한 캐릭터, 디자인 및 콘텐츠가 필요합니다. 흐름은 유사해야 하며 앱의 전반적인 느낌은 모든 채널과 장치에서 일관되어야 합니다.
"일관성과 스타일 가이드 덕분에 다양한 기기에서의 사용자 경험이 여전히 동일한 디자인 시스템에 속한 것처럼 느껴집니다." Antonella Iselli, 스코픽 디자이너
귀하의 웹사이트를 탐색하는 방법을 이미 알고 있는 모든 사용자는 귀하의 웹 앱과 쉽게 상호 작용할 수 있어야 하며 그 반대의 경우도 마찬가지입니다. 애플리케이션이 텍스트 스타일, 동일한 색상, 전반적인 UX 디자인 등 정체성 언어의 일부인지 확인하세요.
UX 디자인 팁: 말투에 주의하세요
하지 말아야 할 일의 예는 다음과 같습니다. 단어 선택만 말할 수 있을 때 locution이라는 단어를 사용하지 마십시오. 독자를 혼란스럽게 하거나 앱 설정에서 어색함을 느낄 수 있는 단어를 사용하지 마세요. 청중이 기대할 수 있는 전문 용어를 자유롭게 사용하되 꼭 필요한 것이 아니라면 용어를 설명하는 데 시간을 낭비하지 마십시오. 복사본을 만들 때 청중을 염두에 두는 것과 마찬가지로 복사본을 디자인과 연결해야 합니다. 청중과 관계를 맺고 가능한 한 쉽고 원활하게 최종 목표를 달성할 수 있도록 이 두 가지를 조화롭게 사용해야 합니다.
여기서는 사용자를 완전히 이해하는 것이 중요합니다. 그들은 누구입니까? 그들의 목표는 무엇입니까? 그들은 어떤 맥락을 가지고 있습니까? 사람들이 귀하의 앱에 얼마나 많은 시간을 소비합니까? 그들은 IT 전문가입니까, 아니면 'UI', '웹 앱'이라는 단어가 그들을 겁나게 합니까? 사용자의 언어로 디자인하세요.
여기입니다 UI 예시 앱의 기능과 앱이 설계된 대상 고객을 기반으로 적절하게 사용된 특정 산업 전문 용어입니다.
UX 디자인 팁: 실행, 검토, 반복
인생에는 죽음, 세금, 그리고 고객 피드백이라는 세 가지가 있습니다. 클라이언트는 효과적인 앱을 유지하는 데 필수적인 피드백 제공을 좋아합니다. 긍정적인 통찰력과 부정적인 통찰력 모두 사용자 친화적인 웹 앱을 유지하는 데 도움이 됩니다. 완벽한 흐름이 있다고 생각되면 테스트해 보세요. A/B 테스트는 어떤 메뉴 탭, 버튼 색상, 로그인 옵션이 사용자에게 가장 적합한지 확인하는 데 도움이 됩니다. 사용성 테스트와 고객 설문조사를 통해 앱의 친숙성을 측정합니다.
사용자는 당신의 친구라는 점을 기억하십시오. 그리고 다른 관계와 마찬가지로 관계도 지속되도록 끊임없이 노력해야 합니다. 광범위한 테스트와 설문 조사를 실행한 후에는 전환하십시오. 변수를 변경하고 그것이 어디로 가는지 확인하십시오.
UX 디자인 팁: 사용자 참여 유도
명확한 시스템 상태를 통해 사용자에게 항상 최신 정보를 제공하세요. 앱이 준비 중인 경우 이를 명확히 하세요. 무언가가 로드 중인 경우 스피너와 같은 기호를 사용하거나 간단히 "로드 중!"이라는 단어를 추가하세요. 사용자에게 계속 정보를 제공합니다. 결국, 잘 알고 있는 사용자는 참여도가 높은 사용자입니다.
"사용자 친화적인 디자인은 항상 사용자에게 현재 위치와 무슨 일이 일어나고 있는지에 대한 아이디어를 미묘하게 제공함으로써 혼란을 제거해야 합니다." 스코픽 디자이너 Ljubo Ljesevic.
웹 페이지가 로드되는 동안 사용자가 보는 이 기본 화면을 생각해 보세요. 이는 자동으로 표시되어 방문자에게 페이지에 문제가 없으며 단지 로드 중임을 알려줍니다.
UX 및 UI 디자인 팁: 항상 전문가와 상담하세요
웹 앱에서 더 빠른 ROI를 확인하는 확실한 방법은 디자인 전문가 생계를 위해 이 일을 하는 사람. UX/UI 디자이너는 직접적인 경쟁사, 기사, 보고서로부터 정보를 수집합니다. 실제 사용자와의 인터뷰 및 원격 사용자 테스트 실행 경험이 있습니다. 그들은 정보를 수집할 뿐만 아니라 그것이 무엇을 의미하는지, 그리고 그 결과를 바탕으로 개선 사항을 적용하는 방법을 알고 있습니다. 앱의 UI/UX 디자인을 최적화하려면 전문가에게 문의하세요. 적합한 팀과 함께 당신은 즉시 사용자를 포착하고 참여시킬 것입니다.
모든 사용자 친화적인 웹 앱 뒤에는 사용자 인터페이스와 사용자 경험 디자인이 함께 작용합니다. 따라서 UI/UX 디자인을 만들 때 다음 9가지 UI/UX 디자인 팁부터 시작하세요. 하지만 기억하세요. 진정한 사용자 친화적인 앱을 유지하는 것은 지속적인 과정입니다. 효과적인 제품을 준비하고 실행했다면 이제 사용자의 변화하는 요구와 기대에 항상 부응하는지 확인하기 위해 테스트하고 반복해야 합니다.
메시지 전치자