와이어프레임에 죽음. 고화질로 바로!

UX 디자인은 매력적인 학문입니다. 이를 잘 수행하려면 실무자가 다양한 주제와 기술에 정통해야 합니다. 사용자 중심의 디자인 방법론을 실행하고 일상적인 제품 디자인 문제에 대한 사용하기 쉽고 혁신적인 솔루션을 만들기 위해 UX 실무자의 기술과 이해는 기본 드로잉에서 내러티브/여행 디자인, 인지 심리학에 이르기까지 모든 것을 포함합니다.

사용된 도구, 생성된 아티팩트 및 UX/UI 디자인 프로세스에서 발견된 발견 사항이 매우 다양하며 다양한 문서 또는 프로토타입으로 캡처됩니다. 우리의 가장 잘 알려진 빵과 버터 인공물은 좋은 ol' 와이어프레임입니다.

와이어프레임(일반적으로 신속한 평가를 위해 생성된 디자인의 단색 골격)은 훌륭합니다. 이를 통해 관련 없는 많은 당사자의 의견을 모두가 검토할 수 있는 하나의 문서로 번역할 수 있습니다. 많은 다른 직무가 와이어프레임을 평가합니다. 비즈니스 분석가, 프로젝트 관리자, 마케팅 임원, 모든 종류의 디자이너와 개발자, 다양한 기타 공급업체 및 서비스 제공업체, 심지어 제품 테스트의 대상 고객도 포함됩니다. 와이어프레임을 통해 모든 사람은 개별 요구 사항이 어떻게 처리되는지 확인할 수 있으며 무거운 물건을 들기 전에 전체 팀이 모든 문제를 해결할 수 있습니다.

장단점이 있지만 어떤 경우에는 와이어프레이밍 단계를 완전히 건너뛰는 것이 합리적입니다. 발견 직후 또는 프로토타이핑을 준비하는 동안 UX 및 시각적 디자인을 고품질 수준에서 처리하면 많은 시간을 절약할 수 있습니다. 이것은 다른 사람들에게 사용자 테스트 참가자부터 클라이언트 및 동료에 이르기까지 제품의 기능과 모양과 느낌을 동시에 평가할 수 있는 기회를 제공합니다.

와이어프레임을 건너뛰는 것이 타당할 때 와이어프레임이 때때로 문제가 될 수 있는 이유와 와이어프레임이 없는 프로세스 를 워크플로에 적용하는 방법을 알아보겠습니다.

와이어프레임의 문제

폭포수 환경이든 애자일 환경이든 일반적인 디자인 프로세스에는 연구, 정의, 아이디어 구상, 프로토타입 제작, 테스트 및 배포 단계와 그 과정에서 이해 관계자와의 검토를 위한 많은 접점이 포함됩니다.

와이어프레임 설계가 병목 현상이 될 수 있는 경우의 설계 프로세스를 살펴보겠습니다.

이유 1: 클라이언트는 보고 있는 것을 이해하지 못합니다.

설계 프로세스는 일반적으로 문제에 대한 일종의 조사로 시작됩니다. 데스크 리서치, 이해 관계자 인터뷰 및 사용자 인터뷰는 더 깊은 이해를 얻기 위해 수행할 수 있는 활동의 일부일 뿐입니다. 연구 후 디자인 팀은 최상의 솔루션을 찾기 위해 여러 아이디어와 개념을 평가하기 시작합니다.

개념이 보다 구체화되면 설계 팀은 검토 세션 중에 클라이언트와 일련의 와이어프레임을 공유하는 경우가 많습니다.

문제는 와이어프레임이 매우 추상적이라는 것입니다.

그것들은 사물 과 비슷한 것을 설명하지만 실제로 만들어질 것은 아닙니다. 이 단계에서 와이어프레임에는 아래 예와 같이 자리 표시자 이미지와 모든 종류의 TK(향후), FPO(배치 전용) 및 TBD(미정)가 포함됩니다.

방대한 주석 목록에 표시될 기능, 비즈니스 요구 사항 및 오류 처리에 대한 세부 정보가 있을 수 있습니다. 일반적으로 이러한 세부 사항을 자세히 살펴볼 시간이 충분하지 않으므로 고객이 스스로 읽어야 합니다.

와이어프레임 검토 중에 우리는 고객에게 설명 중인 개념에 집중하고 이것이 비즈니스 및 사용자 문제를 해결하는 것으로 보이는지 여부를 평가하도록 요청합니다. 그러나 우리는 관련이 없어 보이는 것들에 대해 여전히 질문을 받습니다. 클라이언트는 와이어프레임이 "최종 사본"인지 또는 영웅 이미지에 표시할 사진의 예를 볼 수 있는지 또는 시각 디자인, UI 프로토타이핑 또는 개발에서 처리될 항목에 대한 또 다른 질문을 알고 싶어합니다.

와이어프레임은 클라이언트와 내부 이해 관계자가 효과적으로 평가하기에는 너무 추상적일 수 있습니다. 와이어프레임은 사람들에게 디자인이 완성되었을 때 어떻게 될 것인지를 말하지만, 머리 속에서 함께 모이게 하려면 정신적으로 많은 작업을 해야 합니다. 우리 고객은 시각적 사상가일 수도 있고 아닐 수도 있으며, 청사진을 보고 성공적인 제품이나 사이트를 상상하기를 기대하는 것은 너무 과도할 수 있습니다.

점을 연결하고, 사려 깊은 토론을 하고, 신중한 피드백을 제공하는 것이 훨씬 더 쉽기 때문에 주석이 달린 시각적 디자인을 검토해 달라고 특별히 요청한 클라이언트가 몇 명 있었습니다.

이유 2: 사용자 테스트에 항상 적합한 것은 아닙니다.

전체 개념의 실행 가능성에서 트랜잭션에 표시할 세부 수준에 이르기까지 모든 것을 테스트할 수 있는 좋은 방법이기 때문에 일부 사용자 테스트가 디자인 프로세스에 예정되어 있기를 바랍니다.

이러한 종류의 것을 테스트하는 한 가지 일반적인 방법은 프로토타입을 만드는 것입니다.

와이어프레임은 프로토타이핑을 위해 작동할 수 있습니다. 디자인 팀은 테스트 흐름과 기능에 국한되며 시각적 디자인 레이어가 없기 때문에 사용자 행동에 영향을 미치는 시각적 스타일을 쉽게 무시할 수 있습니다.

이게 현명한거야? UX, 비주얼, 카피 디자인은 모두 서로에게 영향을 미칩니다. 테스트 환경에서 분리하여 격리하기가 어렵습니다. 과학적 연구와 유사하게, 단독으로 테스트된 한 기능의 결과는 야생에서 어떻게 작동할지 제어하거나 예측할 수 없습니다.

때로는 이러한 모든 것을 종합적으로 테스트하는 것이 더 효과적입니다.

사례: 다국어 제품 또는 서비스. 언어는 전체 디자인에 영향을 미칠 수 있는 다른 문법, 알파벳 및 문자 너비를 가질 수 있습니다.

또한 카피 콘텐츠가 UX에 영향을 미치므로 번역 자체가 UX에 영향을 미칠 수 있습니다.

예를 들어, 다양한 개념을 현지 언어로 설명해야 하기 때문에 몇 가지 다른 정보 아키텍처를 테스트해야 하는 과제가 있었습니다. UI에서 실제 사본을 테스트하지 않았다면 카피라이팅과 번역에 미치는 영향을 발견하지 못했을 것입니다.

우리는 현지 언어로 유사한 개념을 설명하기 위해 더 많은 단어가 필요하다는 것과 해당 언어에 필요한 장황한 표현을 수용하기 위해 버튼 크기와 모양을 전역적으로 변경해야 한다는 것을 발견했습니다. UI에서 실제 시각적 구성 요소를 테스트하는 동안 텍스트 문제에 초점을 맞추지 않았다면 버튼이 모바일 화면의 전체 너비를 차지해야 한다는 것을 발견하지 못했을 것이며, 이는 앞으로 UX 디자인에 영향을 미칩니다.

핵심 내용: 특히 다국어 프로젝트의 경우 처음부터 고화질 UI를 준비하는 것이 좋습니다.

이유 3: 개발자와 QA의 삶을 지옥으로 만듭니다.

시각 디자인 단계에서 필연적으로 일어나는 일은 모든 것이 이리저리 움직인다는 것입니다. 쌓인 이미지가 타일이 됩니다. 가운데 정렬된 텍스트가 왼쪽 정렬됩니다. 아코디언 트리거 아이콘은 + 및 - 였지만 이제는 몇 개의 갈매기 모양입니다.

이것은 시각 디자인 프로세스의 정상적인 부분입니다. 또한 정상적인 것은 와이어프레임이 "승인"되었기 때문에 시각적 디자인의 변경 사항이 와이어프레임에 반영되지 않는다는 것입니다.

모든 시각적 개체가 승인되면 모든 것을 개발자에게 넘길 때입니다. 대부분의 경우, 주석이 달린 상세한 와이어프레임 세트와 스타일 가이드와 함께 아름다운 시각 디자인 세트를 받게 됩니다. 이제 이 두 문서를 상호 참조하고 모든 것을 구현하는 것은 그들의 몫입니다.

이것은 설계 프로세스가 실제로 실패할 수 있는 영역입니다. 우리는 개발자에게 참조하기에는 너무 많은 문서를 제공하고 어떤 정보가 우선할지 결정하는 것은 개발자에게 맡깁니다. 이로 인해 지원 요청 및 QA에 필요한 시간이 늘어나 제품이나 업데이트를 시장에 출시하는 데 걸리는 시간에 자연스럽게 영향을 미칩니다.

개발자에게 모든 것을 포함하는 정확한 문서 하나만 제공하지 않는 이유는 무엇입니까? 대부분의 클라이언트는 작업에 대한 완전한 참조로 사용할 사본을 높이 평가할 것입니다.

솔루션: 와이어프레임 건너뛰기

분명히 전체 와이어프레임 단계가 필요할 때가 있고 그렇지 않을 때가 있습니다. 고충실도로 바로 가는 것이 와이어프레임 단계를 능가하는 경우도 있습니다.

다음 중 하나라도 해당되면 와이어프레임 단계를 건너뛸 수 있습니다.

확실한 참고 자료가 있습니다.

기존 작업을 살펴보십시오. 사용 가능한 자세한 UI 참조가 이미 있을 수 있습니다. 기존 웹사이트를 업데이트하거나 기존 앱에 새로운 기능을 추가하는 경우 현재 웹사이트와 앱에서 재사용할 패턴과 스타일을 찾으십시오.

기존 작업의 소스 파일에 액세스할 수 있다면 더욱 좋습니다. 일부 기능과 요소는 말하자면 개발 프로세스 중에 번역 중에 손실되었을 수 있으며 소스 파일을 참조하여 해당 기능이 어떻게 수행되어야 하는지 확인할 수 있습니다.

기존 제품이나 사이트에 추가로(또는 없을 경우) 스타일 가이드나 패턴 라이브러리가 있는지 확인하세요. 클라이언트는 이미 일부 브랜딩 및 시각 디자인 작업에 대한 비용을 지불했을 수 있으며 이러한 리소스는 프로젝트에 다시 사용할 수 있습니다.

하이파이 출력이 가능한 한 정확할 수 있도록 최대한 많은 스타일과 패턴을 사용하십시오.

그 과정에서 반복적인 프로토타이핑과 테스트를 많이 예약했습니다.

몇 주간의 프로토타이핑 및 테스트에 소요되는 노력을 절약하십시오. 처음에 문서를 신중하게 설정하고 반복되는 스타일, 패턴 및 기호를 현명하게 사용하면 충실도가 높은 증분 업데이트를 쉽게 만들고 프로토타이핑 워크플로에 바로 게시할 수 있습니다. 와이어프레임이 필요하지 않습니다.

큰 장점으로 하나의 돌로 두 마리의 새를 죽일 수 있습니다. UX 피드백과 함께 시각적 및 UI 피드백을 받고 이러한 모든 변경을 한 번에 수행할 수 있습니다.

귀하의 테스트 참가자는 매우 문자 그대로입니다.

고객과 동료가 때때로 구체적인 예를 요구할 수 있는 것처럼 프로젝트의 대상 고객도 필요할 수 있습니다.

최근 한 공연에서 저에게 문맹률이 낮은 타겟 청중을 위한 금융 화면을 디자인하게 했습니다. 독해력만이 유일한 문제는 아니었습니다. 추상적인 개념은 종종 다루기가 매우 어려웠습니다. 이 대상 청중은 일반적으로 구체적인 예를 사용하여 재무 개념을 논의하는 데 필요했습니다. 그렇지 않으면 대화를 실제로 따라갈 수 없었습니다.

금융 개념을 이해하기 위해 이 청중의 테스트 참가자는 실제로 거래하는 것처럼 느껴야 했습니다. 그리고 제품이 어떻게 작동하는지 이해하려면 실제 애플리케이션처럼 보이고 느껴져야 했습니다.

이와 같은 청중을 위한 와이어프레임은 잊어버리십시오! 당신은 그것들이 무엇인지 설명하는 데 많은 시간을 할애하게 될 것입니다. 그리고 청중은 작업에 집중하지 않을 것이며, 삶에서 그렇게 익숙하지 않은 것을 사용하는 것과 관련이 없기 때문에 청중이 작업에 대해 어떻게 느끼는지에 집중하지 않을 것입니다.

고객의 시간 및/또는 예산이 제한되어 있습니다.

시간, 자원, 예산이 모두 자신에게 유리한 경우는 드뭅니다. 당신은 종종 범위와 가격을 줄이려고 노력하거나, 어디에서 절약하고 절약할 수 있고 여전히 훌륭한 서비스를 고객에게 제공할 수 있는지 알아보기 위해 노력하고 있음을 발견할 수 있습니다.

전체 UX 작업을 할 여유가 없거나 구매할 가능성이 없는 고객이 있는 경우 와이어프레이밍 시간을 줄이는 것이 좋습니다. 필요한 경우 내부적으로 일부를 생성하되 클라이언트를 위해 프로젝트를 계속 진행하십시오. 실제적이고 유형적인 디자인을 테스트하고 클라이언트가 실제 작업에 반응하도록 합니다.

와이어프레임 단계를 종료하는 방법

이 부분은 개인 작업 흐름과 클라이언트의 특정 요구 사항에 따라 달라지므로 다소 주관적입니다.

즉, 이것은 초기에 워크플로에 적응하려고 시도할 수 있는 프로세스 "템플릿"입니다.

1단계: 일반적인 조사 및 발견 프로세스로 시작합니다.

인터뷰, 현장 관찰, 탁상 조사, 경쟁 분석 등 평소에 하던(또는 하기로 예정된) 무엇이든 평소와 같이 이 단계를 완료하십시오.

2단계: 도중에 약간 스케치합니다.

연구를 수행하는 동안 유용한 레이아웃 및 패턴, 매력적인 흐름 등에 대한 몇 가지 아이디어를 얻을 수 있습니다. 평소에 하던 대로 기록합니다. 나는 노트 옆에 필기 노트와 함께 썸네일 스케치를 만드는 것을 좋아합니다. 화이트보드에 스케치하거나 흥미로운 UI 패턴의 스크린샷을 찍는 것을 선호할 수 있습니다. 좋은 아이디어를 기억하는 데 도움이 되는 것은 무엇이든 하십시오.

3단계: 고화질 문서 준비

선택한 디자인 도구를 열고 문서를 올바르게 설정합니다. 일부 대지 크기를 선택하고 반복 가능한 모양, 그룹 및 기호 만들기를 시작합니다.

시간을 내어 브랜드 색상 팔레트를 개별 견본으로 저장하고, 유형 스타일을 생성 및 구성하고, 필요에 따라 모든 모양에 적용할 수 있는 표준 그림자 및 필터를 만드십시오.

기호를 올바르게 만드는 데 많은 시간을 할애하십시오. 상태에 따라 4가지 색상을 가질 수 있는 버튼이 있을 수 있습니다. 가능하면 기호 재정의를 사용하여 필요에 따라 다른 색상과 텍스트 레이블을 쉽게 적용할 수 있습니다.

사용된 사용자 정의 아이콘이 있는 경우 정사각형 아트보드(또는 적절한 모양)에 개별 기호로 저장합니다. 그렇게 하면 적절한 간격과 정렬을 유지하면서 쉽게 확장 및 축소할 수 있습니다.

4단계: 디자인을 시작합니다.

이러한 방식으로 작업하고 스타일 가이드가 유지되는 위치(및 그렇지 않은 위치)를 확인하는 데 익숙해지면 첫 번째 라운드가 약간 거칠 수 있습니다. 아직 정의된 스타일이 없는 패턴에 대한 솔루션을 만드는 것 외에도 모든 스타일을 올바르게 만들기 위해 약간의 조정 작업을 수행해야 합니다.

이 프로세스 전반에 걸쳐 좋은 "복사 방향"을 따르거나 실제 사본이 있는 경우 이를 따르십시오. "페이지 제목이 여기에 표시됩니다"와 같은 제목을 만들지 마십시오. 시청자에게 여기가 실제 라면 어떤 모습일지 상상하게 하세요.

마찬가지로 전화번호 555-1212로 모두 John Smith라고 하는 이름 목록을 만들지 마십시오. 임의 목록 생성기 또는 플러그인을 사용하여 다른 이름과 숫자를 만들거나 표시해야 하는 데이터 세트를 만드십시오. 이것은 지나친 것처럼 보일 수 있지만 레이아웃 및 문자 너비와 관련된 문제를 해결할 수 있게 하고 시청자가 이 다섯 가지 항목이 모두 다르다는 것을 이해하는 데 도움이 됩니다.

5단계: 설계를 중단할 때를 파악합니다.

정말 시간이 너무 오래 걸리기 때문에 이 시점에서 처리해서는 안 되는 몇 가지 세부 정보가 있습니다. 영웅에 들어갈 정확한 이미지를 선택하거나 다운로드 상태를 나타내는 사용자 지정 아이콘을 디자인하는 것일 수 있습니다. 이는 자리 표시자 이미지 또는 아이콘을 사용하도록 선택하고 나중에 실제 이미지 또는 도상학을 테스트하도록 선택할 수 있는 몇 가지 경우입니다.

프로젝트의 목표와 프로젝트의 진행 정도에 따라 달라지므로 여기에서 적절한 것을 선택해야 합니다.

작업을 적절하게 평가하기 위해 사용자 테스트 참가자가 필요로 하는 것에 따라 다를 수 있습니다. 위에서 언급한 문맹률이 낮은 대상 청중의 경우 너무 자세한 내용은 없었습니다. 각 참가자에 대해 응용 프로그램이 실제로 "그들의" 것처럼 느껴지도록 전체에 사용된 실명과 전화 번호로 프로토타입의 변형을 만들었습니다. 그들이 가정해야 하는 것이 적을수록 더 쉽게 따를 수 있었고 더 나은 결과를 얻을 수 있었습니다.

6단계: 고품질 피드백과 테스트 결과를 즐기십시오.

선택한 프로토타이핑 도구에 바로 디자인을 게시하고 테스트를 위해 현장으로 가져오세요. 이제 기능 이상에 대한 피드백을 받을 수 있습니다. 색상 대비 또는 가독성 문제와 같은 잠재적인 시각적 문제를 발견하고 복사 방향 또는 번역 문제를 발견할 수 있습니다. 또한 사용자가 모양과 느낌 또는 브랜딩에 대해 가질 수 있는 긍정적이거나 부정적인 감정을 알릴 수 있습니다.

이것들은 여러분이 시각적 디자인 단계에 이르렀을 때 어쨌든 피드백을 받게 될 모든 것입니다. 지금 그 모든 피드백을 받지 못하는 이유는 무엇입니까? 비주얼에 대한 피드백 중 일부는 UX에 직접적인 영향을 미칠 수 있고 그 반대의 경우도 있으므로 가능하면 이 모든 것을 동시에 해결하는 것이 좋습니다.

마무리

의심할 여지 없이 프로젝트의 성공을 위해 전체 와이어프레임 단계가 필요한 경우가 많습니다. 반응형 웹 애플리케이션과 같은 복잡한 디자인은 와이어프레임에 대한 별도의 전용 초점이 필요합니다. 전체 시각적 계층이 이미 개념화되고 적용된 경우보다 와이어프레임 단계에서 모든 비즈니스 요구 사항, 엣지 케이스 및 오류 처리를 해결하는 데 시간과 비용이 절약됩니다.

그러나 올바른 경우에 고화질로 바로 이동하면 프로세스가 향상될 수 있습니다.

• 이해 관계자 피드백을 개선합니다 . 대상 고객의 클라이언트, 개발자, 다른 디자이너 및 테스트 참가자는 그들이 얻을 수 있는 것을 정확히 볼 수 있으므로 고품질 피드백을 제공할 수 있습니다.
• 프로토타이핑 워크플로의 속도를 높이십시오 . 디자인을 바로 테스트할 수 있을 뿐만 아니라 UX, 카피, 비주얼 등 여러 가지에 대한 피드백을 한 번에 얻을 수 있습니다.
• 클라이언트와 개발자에게 단일 문서를 제공합니다 . 버튼 작동 방식을 이해하기 위해 다양한 문서를 상호 참조하고 확인할 필요가 없습니다. 이것은 또한 고객이 내부 이해 관계자와 작업에 대해 논의하여 더 많은 피드백을 얻을 수 있는 좋은 방법입니다.
• 시간과 비용을 절약하십시오 . 그리고 그것은 거의 항상 좋은 일입니다!

참조할 기존 디자인 자료가 있거나 작업의 충실도가 낮거나 높은 경우 청중에게 큰 차이를 줄 프로젝트가 있을 때 이 접근 방식을 시도하십시오.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법