|
요즘 제품 개발자들이 자주 이야기하는 단어는 바로 '사용자 경험'입니다. 요즘에는 모두가 사용자 경험에 점점 더 관심을 기울이고 있지만, 이는 가장 쉽게 무시되는 핵심 요소이기도 합니다. 그렇다면 사용자 경험을 만족시키는 제품을 어떻게 디자인해야 할까요? 제품을 디자인할 때 주의해야 할 몇 가지 사용자 경험 요소를 살펴보겠습니다(http://www.maiziedu.com/course/pm/115-1118/). 이러한 점이 충족되면 사용자 경험 디자인이 됩니다. (http://www.maiziedu.com/course/pm/) 좋은 결정을 내리실 수 있습니다.
사용자 경험의 요소
사용자가 경험하는 모든 것은 신중한 고려와 논쟁을 거쳐 내려진 결정이어야 합니다.
사용자 경험을 고려하고, 이를 구성 요소로 나누고, 다양한 관점에서 이해해야 합니다. 그래야만 결정의 전체 결과를 제어할 수 있습니다.
프레젠테이션 레이어: 프리젠테이션 레이어(표면)에는 그림과 텍스트로 구성된 일련의 웹 페이지가 표시됩니다.
프레임워크 레이어: 프리젠테이션 레이어 아래에는 웹사이트 레이어(골격): 버튼, 컨트롤, 사진 및 텍스트 영역의 위치
구조 레이어: 프레임 레이어에 비해 구조 레이어는 구조의 구체적인 표현입니다. . 프레임워크 레이어는 결제 페이지에서 대화형 요소의 위치를 결정합니다. 구조 레이어는 사용자가 페이지에 접근하는 방법과 작업이 완료된 후 이동할 수 있는 위치를 디자인하는 데 사용됩니다. 웹사이트의 다양한 특징과 기능을 가장 적절하게 조합하고, 이러한 특징과 기능이 웹사이트의 범위를 구성합니다.
전략적 계층: 웹사이트의 범위는 기본적으로 웹사이트 전략 계층)에 의해 결정됩니다. 이러한 전략에는 운영자가 웹사이트에서 얻고자 하는 것뿐만 아니라 사용자가 웹사이트에서 얻고자 하는 것도 포함됩니다.
각 레벨은 그 아래 레벨에 따라 결정됩니다.
휴대폰 스위치 키 설정부터 노키아와 아이폰의 디자인을 살펴보자.
Nokia의 전략 레이어는 휴대폰을 중심으로 구현되고, 스코프 레이어는 기존 휴대폰의 디자인을 모델로 하며, 구조 레이어는 숫자 키보드와 화면, 프레임 레이어는 다음을 포함한 버튼의 레이아웃입니다. 전화기의 온/오프 키는 온후크 키와 함께 설정됩니다. 프리젠테이션 레이어는 끊기 버튼의 패턴, 터치감 및 종료 화면입니다. 모든 디자인은 "휴대폰처럼 작동" 전략으로 구현됩니다.
아이폰의 전략 레이어는 '휴대용 컴퓨터'를 중심으로 전개되고, 스코프 레이어는 'PDA'(조 씨가 실험한 뉴턴)와 컴퓨터를 모델로 하고, 구조 레이어는 전원 버튼이다. 및 터치 스크린(용량성 스크린, 손으로 직접 터치), 프레임 레이어는 켜기/끄기 키입니다. 한 번 누르면 화면이 꺼지고 길게 누르면 종료 메뉴에 액세스하고 확인하고 종료됩니다. 프리젠테이션 레이어는 버튼을 눌렀을 때의 촉감, 화면이 닫히는 시간 간격(사용자가 예상하는 범위 내에서 너무 짧으면 실수로 누르기 쉽고, 너무 길면 사용자가 중단하고 계속해서 시도합니다.) 슬라이딩 화면이 종료됩니다. 모든 디자인은 "휴대용 컴퓨터처럼 멋진 작업" 전략으로 구현됩니다.
제품 디자인의 일반 단계
사용자 조사
많은 사용자 요구 사항을 관리 가능한 여러 부분으로 나눌 수 있습니다. 연구는 사용자 세분화를 통해 수행됩니다. 사용자가 무엇을 원하는지 파악하려면 먼저 그들이 누구인지 알아야 합니다. 사용자 연구 분야는 합의에 도달하는 데 필요한 정보를 수집하는 데 전념합니다.
페르소나(페르소나 또는 사용자 프로필이라고도 함)를 만들어 사용자를 더욱 현실감 있게 만들 수 있습니다. 페르소나는 실제 사용자 전체의 요구를 나타내는 가상의 캐릭터입니다.
작업 분석
작업 분석은 사용자가 작업을 완료하기 위해 취하는 정확한 단계를 주의 깊게 분석하는 방법입니다. 이러한 작업 분해는 사용자가 자신의 이야기를 들려주고 자신의 경험을 말할 수 있는 사용자 인터뷰를 통해 이루어질 수도 있고, 사용자의 '일상 생활 환경'에서 사용자의 행동을 직접 연구하는 현장 설문조사를 통해 이루어질 수도 있습니다.
정보 중심 제품의 경우 카드 정렬을 사용하여 사용자가 다양한 정보 요소를 어떻게 분류하거나 구성하는지 탐색합니다. 사용자에게 정보 요소, 이미지 또는 콘텐츠 유형의 이름과 설명이 포함된 색인 카드 더미를 제공합니다. 그런 다음 사용자는 그룹이나 카테고리를 기준으로 가장 자연스럽게 느껴지는 방식으로 카드를 배열합니다. 여러 사용자의 카드 배열 결과를 분석하면 상품 정보에 대한 사용자의 견해를 이해하는 데 도움이 될 수 있습니다.
기능 명세
기능 명세에는 제품의 모든 세부 사항이 포함될 필요는 없으며, 설계 또는 개발 과정에서 혼란을 야기할 수 있는 기능에 대한 정의만 포함하면 됩니다. 또한 기능 사양은 제품의 이상적인 미래 상태를 구상할 필요가 없으며 제품을 만들 때 내린 결정을 문서화하면 됩니다.
인터랙션 디자인
인터랙션 디자인()과 정보 아키텍처는 모두 사용자에게 표시될 각 요소의 "패턴"과 "순서"를 결정한다는 한 가지 핵심 사항을 강조합니다. 인터랙션 디자인은 사용자가 작업을 수행하고 완료하는 데 영향을 미치는 요소에 중점을 둡니다. 정보 아키텍처는 사용자에게 정보를 전달하는 요소에 중점을 둡니다.
정보 아키텍처
정보 아키텍처는 사람들이 정보를 인식하는 과정을 연구합니다. 제품의 경우 정보 아키텍처는 사용자에게 제공되는 정보가 합리적이고 의미가 있는지에 중점을 둡니다.
정보 아키텍처에는 구성 원칙에 따라 노드가 배치됩니다. 말 그대로, 구성 원칙은 기본적으로 어떤 노드를 함께 그룹화해야 하고 어떤 노드가 독립적으로 유지되어야 하는지 결정하는 기준입니다.
이러한 속성은 도서관 과학 용어로 '패싯'이라고 하며 거의 모든 콘텐츠에 대한 간단하고 유연한 구성 원칙 및 메타데이터 세트를 제공합니다.
통제사전은 웹사이트에서 사용하는 표준 언어 집합입니다. 이는 사용자 연구의 중요한 영역입니다. 사용자와 대화하고 의사소통 방식을 이해하는 것은 사용자가 자연스럽게 느끼는 명명 원칙 시스템을 개발하는 가장 효과적인 방법입니다
인터페이스 디자인
성공적인 인터페이스 디자인은 사용자가 느끼는 것입니다. 첫눈에 "가장 중요한 것"의 인터페이스 디자인을 보세요. 반면에 중요하지 않은 것들은 눈에 띄어서는 안 됩니다. 때로는 그것들이 존재하지도 않기 때문입니다.
웹사이트에서 사이니지는 일반적으로 내비게이션 디자인과 정보 디자인을 포함합니다. 웹사이트의 탐색 시스템은 웹사이트의 다양한 영역에 대한 액세스를 제공해야 할 뿐만 아니라 이러한 옵션도 명확하게 전달해야 합니다.
와이어프레임
와이어프레임은 웹사이트의 시각적 디자인을 공식적으로 확립하는 과정에서 필요한 첫 번째 단계이지만, 이 개발 과정에 참여하는 거의 모든 사람이 다른 작업 포인트에 참여하게 됩니다. 전략, 범위 및 구조 수준을 담당하는 디자이너는 와이어프레임을 사용하여 최종 제품이 기대치를 충족하는지 확인할 수 있습니다. 실제로 웹사이트를 구축하는 사람들은 와이어프레임을 사용하여 웹사이트가 어떻게 작동해야 하는지에 대한 질문에 답합니다.
냄새와 맛
사용자에게 경험을 제공하기 위한 전체 디자인 과정의 마지막 단계입니다. 우리의 디자인이 궁극적으로 인간의 감각 기관에 어떻게 느껴질지 결정하는 것입니다.
대비와 일관성
사용자는 디자인에서 요소가 돋보일 때 이를 알아차립니다. "통합된 브랜드 아이덴티티"를 사용하여 사용자(고객, 잠재 고객, 경영진, 직원 또는 기타 방문자)에게 제공되는 제품의 "미디어 전반에 걸친 일관성"을 강화하십시오. 이러한 브랜드 아이덴티티의 일관성은 모든 수준에서 디자인되어야 합니다. 모든 화면에 나타나는 탐색 요소부터 한 번만 나타나는 일반 버튼까지.
디자인 구성 및 스타일 가이드
이러한 디자인 결정을 전달하는 권위 있는 문서는 스타일 가이드입니다. 이 요약 문서는 가장 큰 요소부터 가장 작은 요소까지 시각적 디자인의 모든 측면을 식별합니다.
|
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
