모든 디자이너가 알아야 할 UX 디자인 기법
게시 됨: 2019-05-24완벽한 UX 디자인을 완성하는 것은 기념비적인 작업이 될 수 있습니다. 사용자 기반마다 요구 사항과 기술 수준이 다릅니다. 한 사람에게 효과가 있는 것이 다른 사람에게는 완전히 실패할 수 있습니다. 당신이 생각해낸 디자인이 타겟 청중과 완벽하게 일치하는지 확인하기 위해 적절한 조사를 수행하는 것이 중요합니다.
너무 많은 디자인 기술로 인해 상황에 맞는 것을 선택하고 작업을 시작하는 것이 어려울 수 있습니다! 이 사본은 사용자 친화적인 앱을 만드는 데 도움이 되는 최고의 디자인 기술을 안내합니다.
먼저 향후 제품에 대한 모든 정보(제품에 대한 소유자 및 사용자의 기대, 주요 사용자 흐름, 앱의 전체 아키텍처)를 수집하고 분석해야 합니다. 다음은 가장 인기 있는 연구 기술입니다.
이해관계자 인터뷰
이해 관계자는 상호 작용하거나 제품 사용의 영향을 받을 가능성이 있는 조직 외부 또는 내부의 리더, 부하 직원, 동료 또는 고객입니다. 이해 관계자와 대화를 나누는 것은 사용자가 귀하의 제품을 어떻게 사용할 것인지에 대한 아이디어를 얻을 수 있는 기회를 제공하고 핵심 성능을 개선하고 주요 기능에 집중하기 위해 무엇이 중요한지 정의하는 데 도움이 될 수 있습니다.
사전에 회의 날짜와 시간을 협의하고 질문 목록을 작성하십시오. 예를 들어, 질문 목록은 다음과 같을 수 있습니다.
a ) 프로젝트 비전:
- 제품의 성공을 정의하는 것은 무엇입니까?
- 제품에 대한 비전을 알려주세요.
b ) 회사:
- 회사의 역사는 무엇입니까?
- 회사의 목표는 무엇입니까?
- 누가 주요 경쟁자로 생각합니까?
c ) 사용자:
- 타겟 고객을 설명할 수 있습니까?
- 다양한 유형의 사용자는 무엇입니까?
- 앱의 기본 사용 컨텍스트를 알고 있습니까?
사용자 인터뷰
이해 관계자 인터뷰와 마찬가지로 사용자 인터뷰는 현재 사용자 기반에서 유용한 정보를 얻을 수 있는 효과적인 연구 기술입니다. 사용자와 그들이 귀하의 제품을 어떻게 사용할 것인지에 대해 더 철저하게 이해함으로써 기능 세트를 정하고 디자인을 시작할 수 있습니다. 수정해야 할 사항과 나중에 추가해야 할 잠재적인 새 기능을 파악하는 데 도움이 됩니다.
앱, 특히 틈새 시장의 경우 사용자 인터뷰는 제품으로 해결할 수 있는 업계의 문제점에 대한 유용한 정보를 얻을 수 있는 좋은 기회입니다. 전문적인 배경, 앱 사용의 주요 목표, 해결하고 싶은 가장 일반적인 문제를 물어볼 수 있습니다.
그리고 이해관계자 인터뷰와 마찬가지로 사용자 인터뷰도 신중한 준비가 필요합니다. 첫째, 면접 대상자를 현명하게 선택하십시오. 소셜 네트워크, 커뮤니티 조직 또는 소셜 클럽을 통해 사용자를 찾을 수 있습니다.
사람들을 찾은 후에는 인터뷰의 목표를 명확하게 정의하고 그에 대한 질문을 준비하세요. "Instagram을 사용합니까?"와 같은 유도 질문을 피하십시오. 대신 "Instagram을 사용한 경험에 대해 이야기해 주십시오"라고 물어보십시오. 후속 질문은 유익한 토론을 촉진하고 질문하는 것을 잊은 통찰력을 다룰 수 있습니다.
인터뷰 대상자를 편안하게 만들고 긴 인터뷰로 그들을 짜증나게 하지 마십시오. 인터뷰하는 동안 모든 답변을 기록하십시오.
이 기술에만 의존하면 프로젝트가 실패하는 이유가 될 수 있습니다. 이 기술에는 몇 가지 함정이 있습니다.
- 불행히도 사람들이 말하는 것이 사용자가 하는 것과 항상 같지는 않습니다. 인간의 기억은 완벽하지 않기 때문에 인터뷰 대상자는 웹 또는 모바일 앱 사용 경험의 모든 세부 사항을 기억할 수 없습니다. 그들이 이것을 기억할 수 없을 때, 그들은 기억에서 그것을 기억할 수 없다고 말하는 대신에 차라리 이야기를 꾸며내고자 한다. 그들의 이야기는 논리적으로 들릴지 모르지만 실제 상황을 보여주지는 않습니다.
- 소그룹은 전체 청중을 대표할 수 없습니다. 대부분의 경우 6~8명의 참가자가 있는 2~3개의 그룹만 있습니다. 참가자의 가정적 의견은 전체 대상 청중의 비전을 나타낼 수 없습니다.
- 그룹 리더는 말하는 내용에 영향을 미치는 반면 내성적인 사람들은 의견을 많이 공유하지 않습니다. 온라인으로 조사를 수행하면 이 두 가지 상황을 제거하는 좋은 방법이 될 수 있습니다. 연구에 따라 그룹을 구성하지만 각 참가자와 한 명씩 이야기할 수 있습니다.
작업 분석
작업 분석은 작업 또는 작업을 완료하기 위해 수행해야 하는 단계에 대한 연구입니다. 현재 제품이 작동하는 방식과 제품이 데이터를 활용하는 방식에 대한 아이디어를 얻을 수 있습니다. 모든 사람이 먼저 작업해야 하는 제품의 우선 순위를 지정할 수 있습니다.
이 기술은 사용자가 앱에서 달성하려는 목표, 해당 목표를 달성하기 위해 취하는 단계, 이러한 단계를 수행하는 동안 직면하는 문제를 이해하는 데 도움이 됩니다.
작업 분석에는 계층적 및 인지적 두 가지 유형이 있습니다. 계층적 작업 분석을 수행하는 알고리즘은 다음과 같습니다.
- 분석할 하나의 작업을 정의합니다. 분석할 페르소나와 시나리오를 선택합니다. 이 작업의 원하는 결과와 목표 달성을 위해 취해야 할 단계를 정의합니다.
- 작업을 여러 하위 작업으로 나눕니다. 그러나 너무 많은 추상적인 하위 작업을 만들지 마십시오. 대부분의 경우 5~9개의 하위 작업이면 충분합니다.
- 사용자가 취하는 각 작업의 다이어그램을 만듭니다.
- 다이어그램을 만든 후 사용자가 이 하위 작업을 완료하는 방법에 대한 자세한 이야기를 작성합니다.
- 작업이 완료되면 분석을 검토합니다. 분석에 참여하지 않았지만 작업의 세부 사항을 알고 있는 다른 전문가에게 검토 시 제공합니다.
예를 들어, 다음은 Bestbuy.com에서 게임용 마우스를 구매하기 위한 작업 분석의 예입니다.
인지 작업 분석에는 동일한 단계를 수행하는 것이 포함됩니다. 그러나 또한 초보자와 전문가가이 작업을 완료하는 방법을 분석해야합니다.
사용 사례 또는 행동 다이어그램
사용자의 행동을 시각적으로 표현한 것입니다. 다양한 유형의 사용자가 취할 수 있는 조치를 보여줍니다. 예를 들어 인사말 카드 앱을 만들어야 합니다. 앱에는 두 가지 유형의 사용자가 있습니다. 축하하는 사람과 생일 사람입니다. Congratulator는 Facebook을 통해 로그인하고 Facebook 친구 목록에서 생일 사람을 선택합니다. 그 후, 그들은 목록에서 카드를 선택하고 소원을 쓰고 생일 사람에게 보냅니다.
생일 사람이 기프트 카드를 받은 후 앱에서 보거나 좋아요를 누르거나 응답할 수 있습니다. 생일인이 아직 앱을 설치하지 않은 경우 앱 스토어에 와서 앱을 설치합니다. 행동 다이어그램은 다음과 같습니다.
사용자 스토리 또는 행동 사양
이것은 앱과의 각 상호 작용에 대한 서면 설명입니다. 모든 사용자 스토리는 "사용자로서, 저는 ... 하고 싶습니다."로 시작하고 사용자가 취할 수 있는 가능한 조치에 대한 설명을 작성합니다. 예를 들어, “사용자로서 내 주문 내역을 보고 싶기 때문에 내 주문 탭으로 이동하여 주문 내역 버튼을 클릭합니다.
사용자 스토리를 만든 후 스프린트 계획을 시작하고 각 사용자 사례에 대한 우선 순위를 설정할 수 있습니다. 사용자 스토리에 설명된 기능을 구현하는 데 필요한 시간을 정의하는 것도 가능합니다. 또한 사용자 흐름 작업을 시작할 수 있습니다.
사용자 흐름
이것은 사용자가 앱에서 취하는 일반적인 단계의 순서를 보여주는 다이어그램입니다. 이 기술은 UX 디자이너가 재설계하거나 개선할 수 있는 단계를 식별하는 데 도움이 됩니다. 다음은 사용자 흐름 다이어그램의 예입니다.
보시다시피 각 모양에는 특정 정의가 있습니다. 빨간색 화살표는 신규 사용자의 경로를 정의하고 파란색 화살표는 등록된 사용자의 경로를 정의합니다. 라운드는 오류와 공중 그네를 의미합니다 – 사용자 결정. 마찬가지로 사용자 흐름을 생성하기 전에 각 모양에 대한 정의를 제공해야 합니다.
마인드맵
앱의 각 페이지에 기능을 정의하기 위해 사용자 흐름이 생성되는 반면, 마인드 맵을 통해 디자이너는 제품의 전체 아키텍처를 볼 수 있습니다. 앱의 모든 부분과 그 상호 관계를 그래픽으로 표현한 것입니다.
마인드 맵을 만드는 데 많은 시간이 걸리지 않으며 이것이 이 기술의 주요 이점 중 하나입니다. 마인드맵을 만들기 위한 온라인 도구를 쉽게 찾을 수 있습니다. 이 기술을 사용하면 앱의 기능을 소개하고 논의하는 데 시간을 낭비하지 않을 것입니다.
예를 들어 다음은 Apple 앱 스토어에서 찾을 수 있는 My Day 라는 카운트다운 앱의 마인드 맵입니다.
와이어프레임
모든 정보를 수집하고 앱의 아키텍처를 구축했으면 이제 앱을 디자인할 차례입니다! 특정 페이지에 요소가 배치되는 방식을 보여주는 웹 또는 모바일 앱의 레이아웃, 와이어프레임으로 시작하는 것이 좋습니다.
와이어프레임은 고객이 설계 프로세스에 참여하도록 하고 보다 효과적으로 변경하는 데 도움이 됩니다. 따라서 이 기술은 시간을 절약할 수 있습니다. 설계가 완료되었을 때 무언가를 변경하는 것보다 와이어프레임을 변경하는 것이 훨씬 쉽습니다. 앱의 콘텐츠를 디자인하는 카피라이터가 있는 경우 각 페이지의 콘텐츠 길이를 측정할 수 있습니다.
한편, 시간과 노력이 필요한 앱 개발의 또 다른 단계입니다. 또한 와이어프레임은 설계자에게 한계로 간주될 수 있습니다. 그들은 이 뼈대를 고수해야 하므로 창의성은 뒤에 남겨두십시오.
종이에 와이어 프레임을 그리거나 특수 도구를 사용할 수 있습니다. 아래에서 피트니스 센터 플랫폼용으로 생성된 와이어프레임의 예를 볼 수 있습니다.
프로토타입
프로토타입은 앱 디자인이 코더에게 전달되기 전에 앱과 상호 작용할 수 있도록 하는 웹 또는 모바일 앱 기능 및 탐색의 시뮬레이션입니다. invisionapp.com 또는 mockup.io와 같은 프로토타이핑 서비스의 도움으로 와이어프레임 또는 모형을 업로드하고 클릭 가능한 버튼이 있는 앱을 얻을 수 있습니다.
사용성 테스트
소홀히 해서는 안 되는 다음 단계는 앱을 테스트하는 것입니다. 사용성 테스트는 사용자가 제품과 상호 작용할 때 제품 내에서 결함이나 잠재적 개선 영역을 정확히 찾아내는 것을 관찰하는 곳입니다. 사용성 테스트는 전체 제품으로 일반화될 수도 있고, 필요에 따라 제품의 단 하나의 단일 작업 또는 프로세스에서 연마될 수도 있습니다. 웹사이트 사용성 테스트에 대한 별도의 기사를 읽을 수 있습니다.
A/B 테스트
A/B 테스팅은 두 플랫폼 간의 수용도와 사용 편의성을 비교하기 위해 사용자에게 서로 다른 버전의 제품을 제공하는 기술입니다. 디자인대로 작동하는지 확인하기 위해 작은 디자인 조정 및 기능을 테스트하는 데 도움이 됩니다. 예를 들어 Runkeeper 앱에 대해 A/B 테스트를 수행했습니다.
눈 움직임 추적
시선 움직임 추적을 활용하여 UX 레이아웃이 어떻게 흐르는지, 사용자가 인터페이스를 탐색하는 방법을 알 수 있습니다. 이 기술은 사용자 인터페이스의 모양과 느낌을 최적화하는 데 도움이 되며 개선하거나 제거해야 하는 기능과 콘텐츠의 범위를 좁히고 우선 순위를 지정하는 데 도움이 될 수 있습니다.
결론
제품에 대한 새로운 디자인이나 레이아웃을 구상하는 것은 때때로 겁이 날 수 있지만 위에 설명된 기술 중 일부를 활용하면 훨씬 쉽게 만들 수 있습니다! 다음 번에 이 중 몇 가지를 시도하면 디자인 및 개발 프로세스가 훨씬 더 빠른 속도로 진행되고 결과적으로 사용자가 훨씬 더 나은 제품을 얻게 될 것입니다!