디자인을 단순화하는 방법 (How to simplify your design)

이 글은 Taras BakusevychHow to simplify your design글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

따르기 쉬운 20이상의 일러스트레이션 된 예제
presentation
기업들은 단순하고 사용 가능한 제품을 지속적으로 개발하기 위해 노력하고 있습니다. 더 많은 기능, 새로운 기술 및 고급 기능을 제공하지만 여전히 가볍고 사용하기 쉬운 형식입니다. 종종, 단순하게 만드는 것은 있을 수 있는 가장 어려운 일입니다.

"단순함"이란 무엇입니까?

우리는 단순함을 쉽게 이해하거나 할 수 있는 것으로 정의할 수 있습니다. 어렵지 않게 말이죠. 단순성은 주관적인 것이고, 한 사람에게 단순해 보이는 것들은 다른 사람에게도 똑같이 인식되지 않을 것입니다. 일반적으로 우리는 다음과 같은 세 가지 빠른 단계로 프로세스가 단순하거나 복잡하다는 개인적인 의견을 형성합니다.
presentation
사용자가 목표를 달성하는 과정에서 발생하는 문제를 제거하면 단순함으로 전환하는 데 도움이 됩니다. 단순함의 법칙에서 John Maeda는 비즈니스, 기술 및 설계의 단순함과 복잡함의 균형을 맞추기 위한 10가지 법칙을 제시합니다. 즉, 필요한 것이 적고 실제로 더 많은 것을 얻기 위한 지침입니다.
presentation
The Laws of Simplicity, John Maeda: http://lawsofsimplicity.com/
마에다 (MIT 's Media Lab) 교수이자 세계적으로 유명한 그래픽 디자이너 인 마에다 (Maeda)는 "개선 된"개념을 어떻게 재정의하여 항상 더 많은 것을 의미하지는 않는지에 대한 질문을 탐구합니다. 그리고 책은 훌륭한 읽을 거리이므로 정말 확인해보십시오.
복잡성은 어떻습니까?
단순함에 대해 말하면 스펙트럼의 반대편을 언급해야합니다. 단순함의 복잡함 감각은 주관적입니다. 적절한 훈련을 통해 로켓트 과학조차 그렇게 어렵지 않습니다. 그러나 가장 단순한 작업조차도 복잡하게 만드는 몇 가지 요인이 있습니다. 가능한 한 제품 디자인을 피해야합니다.
presentation

그렇다면 어떻게 제품 디자인에 적용할 수 있을까요?

1. 집중된 가치를 지닌 제품을 만듭니다.
너무나 많은 고객들을 위해 많은 것을 하려고 하는 소프트웨어가 있습니다. 모든 사람들은 이 산업의 스위스 군대 칼이 되려고 노력합니다. 제품을 단순화하려면 핵심 값을 정의하고 이 제품의 실제 용도를 식별해야 합니다. 모든 제품에 Facebook이 내장되어 있는 것은 아닙니다.
presentation
2. 불필요한 것을 모두 제거합니다.
단순함을 달성하는 가장 간단한 방법은 사려 깊은 감소입니다. 의심스러우면 그냥 없애세요. 보조 정보, 자주 사용되지 않는 컨트롤 및 주의를 산만하게 하는 스타일입니다. 그만큼 쉽죠. 이 원리를 적용하기 시작하면 결과가 즉시 표시됩니다. 하지만 제거하는 것은 조심하세요.
presentation
"단순함은 잡음이 없는 것이 아니라 단순함의 결과입니다. 단순함은 본질적으로 개체와 제품의 목적과 위치를 설명하는 것입니다. 잡동사니가 없는 것은 그저 잡동사니 없는 상품일 뿐입니다. 간단하지 않아요."-Jonathan Ive
3. 데이터를 의미 있는 형식으로 변환합니다.
우리가 매일 설계하는 대부분의 제품은 사용자가 일상 업무를 효율적으로 수행하기 위해 이해해야 하는 많은 데이터에 초점을 맞추고 있습니다. 추세와 변화에 관심이 있는 사용자를 알고 있을 때는 숫자 뭉치보다는 시각적 표현을 도와줍니다. 언제든지 필요에 따라 추가 정보를 표시할 수 있습니다. 가지고 있는 데이터에서 의미 있는 데이터를 추출하여 사용자 앞에 놓습니다.
presentation
4.빠른 의사 결정을 지원합니다.
선택의 폭격을 받은 사용자들은 그들이 원하지 않는 일을 그들에게 주면서 해석하고 결정하는 데 시간을 들여야 합니다. 이것은 힉의 법칙(Hick’s Law)에 의해 잘 설명되었습니다. 힉의 법칙(Hick’s Law)은 결정을 내리는 데 걸리는 시간과 노력이 옵션의 수에 따라 증가한다고 예측합니다. 따라서 사용자 환경이 단순하다고 느끼려면 가능한 한 신속한 의사 결정을 지원해야 합니다. 필요하지 않을때, 선택이나 안내할 필요가 없습니다.
presentation
5. 선택의 폭이 너무 넓으면 고객이 겁을 먹게 됩니다
현재의 심리 이론과 연구는 개인적인 선택을 갖는 것의 긍정적인 정서적 그리고 동기적 결과를 긍정합니다. 이러한 발견은 선택의 폭이 넓을수록 더 좋다는 통념과 인간의 선택에 대한 욕구가 무한하다는 통념으로 이어졌습니다. 하지만 실제로는, 연구는 그 반대입니다.
잼 실험은 소비자 심리학의 가장 유명한 실험 중 하나입니다; 소비자들에게 선택권을 적게 주는 것은 판매에 좋을 수 있습니다. 비판적으로, 이 연구는 선택권이 적은 것이 당신의 판매량을 향상시킬 수 있다는 것을 보여줍니다.
presentation
이 실험은 선택권이 적은 고객이 선택권이 많은 고객에 비해 구매할 가능성이 10배 더 높다는 것을 입증하는 것으로 보입니다. 이는 선택 과중의 중요한 예로서 도움이 되어 왔습니다. 즉, 고객에게 선택권을 너무 많이 제시하면 실제로 고객 구매를 억제한다는 것입니다.
presentation
6. 여러 가지 선택 사항이 제시된 경우 권장 사항을 제공합니다.
선택을 피할 수 없는 경우에는 해당 선택을 제한합니다. 직접 추천하거나 다른 고객이 가장 선호하는 항목에 대한 통계를 공유합니다. 제안된 옵션 간의 주요 차이점을 사용자에게 명확하게 전달합니다. 이 접근 방식은 종종 가격 계획 페이지에 사용됩니다.
presentation
7. 사용자의 주의를 올바른 영역에 끌어다 놓습니다.
사용자가 자신의 목표를 달성하기위한 여정을 이해하면 해당 여행의 모든 단계에서 더 관련성이 있으며 최종 목표로 나아갈 수 있도록 도와줍니다. 핵심 영역을 찾아 사용자 관심을 유도하십시오.
presentation
8. 색상과 타이포그래피를 사용하여 콘텐츠의 계층을 전달합니다.
"사용자가 읽지 않음"을 얼마나 많이 들었습니까? 사실, 우리는 실제로 기억하거나 깊이 파고드는 것에 선택적입니다. 한 마디도 읽지 않고 거대한 사용자 정책을 받아들인 적이 있다면 무슨 말인지 알 것입니다. 서체 & 글꼴, 크기, 커닝, 리드, 대문자, 색상 등 통신 유형에 영향을 줄 수 있는 여러 가지 특성이 있습니다. 콘텐츠 계층을 통신하려면 이 옵션을 사용합니다. 올바른 사용의 색상과 타이포그래피로 제품 브랜드를 반영할 수 있으며, 제품 브랜드를 즉각적으로 알아볼 수 있고, 훨씬 더 매력적이고 기억에 남을 수 있습니다.
presentation
9. 조직은 더 적고 관리하기 쉬워 보이는 많은 시스템을 지원합니다.
간단한 테스트를 해 보죠. 아래 그림에는 두 개의 이미지가 있습니다. 스톱워치를 사용하여 각 사각형에 있는 검은색 점의 수를 세는 데 걸리는 시간과 노력을 측정합니다.
presentation
끝났나요? 여러분이 직접 볼 수 있듯이, 구성되지 않은 네모난 점들을 세는 데는 시간이 상당히 더 걸렸고, 게다가 그 점이 훨씬 더 많은 인지적 부담을 줍니다. 정사각형의 점 수가 동일하면 왜 이런 결과가 나왔을까요?
점을 특정 매트릭스에 매핑하여 시각적으로 스캔하고 셀 때 그룹화하는 데 도움이 되었습니다. 정리되지 않은 광장에 있는 동안 우리는 그것들을 개별적으로 세면서 점으로 가야만 했습니다. 또한, 많은 분들이 잘못 계산했거나 왼쪽 이미지로 결과를 이중으로 확인할 수 밖에 없었을 것입니다.
presentation
요소를 구성하면 인식 기능이 향상될 뿐만 아니라 기억하기 쉬워집니다. 기계를 작동할 때는 모든 컨트롤의 위치와 기능을 기억하는 것이 매우 중요합니다. 작은 운동을 한 번 더 해요. 불과 1분 전에 여러분은 두 개의 이미지에서 점들을 세고 있었습니다. 이제 두 개의 사각형 안에 있는 모든 점들의 위치를 기억하세요. 대부분의 경우 조직되지 않은 구조를 떠올리는 것은 거의 불가능에 가깝습니다.
presentation
10. 관련 내용을 그룹화합니다.
복잡한 페이지를 단순화하는 쉬운 방법은 구성 요소를 그룹화하는 것입니다. 이 시점에서 사용자는 관련이 없는 다수의 구성요소를 다루는 것이 아니라 소수의 그룹을 다루고 있습니다. 요소 또는 요소 그룹 주위에 경계(공통 영역 생성)를 추가하면 주변 요소와 쉽게 분리할 수 있습니다. 게스탈트 심리학(Gestalt psychology)에는 아이템들이 연관성을 느끼도록 돕는 그룹화의 여러 가지 원칙이 있습니다: 근접성, 유사성, 연속성, 폐쇄성, 연결성.
presentation
11. 큰 작업을 작은 단계로 나누고 하나의 열(column) 레이아웃을 시도합니다.
다양한 종류의 형태가 거의 모든 제품에 존재합니다. 그것은 사용자 정보를 수집하는 방법입니다. 때로는 불필요한 모든 것을 제거한 후에도 거대해질 수 있습니다. 이러한 양식은 사용자가 끝내기 위해 매우 의욕이 상실 될 수 있습니다. 그래서 우리가 할 수있는 일은 거대한 작업을 일련의 작은 작업으로 나누는 것입니다. 갑자기이 과정을 끝내는 것이 훨씬 쉬워 보입니다. 작은 하위 작업을 마치면 엔도르핀과 만족도가 계속 유지됩니다.
양식을 설계 할 때는 여러 열(column) 대신 하나의 열(column) 레이아웃을 사용하십시오. 하나의 열(column) 레이아웃을 작성하는 것이 훨씬 쉽습니다. 이렇게하면 사용자는 다음에 무엇을 채울 지 생각할 필요가 없으며 간단히 페이지를 직선으로 이동합니다.
presentation
12. 프로세스 및 시스템 상태를 투명하게 전달합니다.
불확실성은 우리를 불안하게 만들어요, 그것은 가능한 한 피해야 해요. 그렇기 때문에 명확하게 드러나지 않는 한 언제든지 사용자는 자신이 현재 진행 중인 과정, 어디서 왔는지, 다음에는 어떤 결과가 나올지 알 수 있어야 합니다. 이전에 제공된 정보를 요약하여 보관하는 것도 좋습니다. 사용자 메모리의 부하를 줄이고 이전 단계를 두 번 확인하기 위해 다시 이동할 필요가 없습니다.
presentation
13. 사용자의 계산을 수행합니다.
숫자와 관련된 원시 산수를 잘 못하는 인간의 뇌입니다. 진화적 압력은 산술적 수술에 비해 개체 인식에 최적화된 뇌를 선호해 왔습니다. 시스템을 활용하여 사용자 대신 모든 계산을 수행합니다.
presentation
14. 점진적인 공개로 복잡성을 숨깁니다.
점진적인 공개는 사용자 인터페이스를 사용자가 쉽게 해석할 수 있도록 하기 위해 UX 디자인에 사용되는 디자인 패턴입니다. 여기에는 관련성이 있을 때까지 사용자를 압도하거나 관련 없는 정보를 숨기지 않도록 여러 화면에서 정보와 작업을 시퀀싱하는 작업이 포함됩니다. 점진적인 공개는 사용자 행동이나 상호작용의 순서를 포함하여 "추상적인 것"에서 구체적인 것으로 이동하는 일반적인 개념을 따릅니다. 점진적인 공개의 좋은 예는 iOS 중첩 인형(doll) 탐색입니다.
presentation
15. 일반적으로 허용되는 패턴과 상호작용에 의존합니다
사용자는 대부분의 시간을 다른 제품에 사용합니다. 즉, 사용자는 이미 알고 있는 다른 모든 사이트와 동일한 방식으로 사이트를 작업하는 것을 선호하며, 제품의 모양과 동작에 대한 구체적인 기대를 갖게 됩니다. 이 문구는 소셜 네트워크에서 냉장고까지 모든 디지털 또는 물리적 제품에 대해 참(true)이며 소비자의 사고방식을 반영합니다. 그렇다고 해서 혁신을 중단해야 하는 것은 아닙니다. 네비게이션이나 조정기(controls)를 제시하는 기존의 방식에서 벗어나 사용자가 자신의 정신 모델을 변경할 수 있는지 여부를 평가해야 합니다.
presentation
16. 간소화된 첫 경험을 설계합니다.
설계의 주요 목표는 사용자를 가능한 한 빨리 제공하는 가치 제품에 연결하는 것입니다. 잠깐 생각해 보세요. 따라서 사용자와 실제로 시스템을 운영하는 사용자 사이에 있는 모든 것은 기능적 필요를 충족시키지 않는 한 장벽입니다. 처음의 경험은 어떤 과정에도 매우 중요합니다. 우리 인간은 제품에 대한 우리의 의견을 형성하는 것이 매우 빠르며 만족하지 않으면 즉시 물러납니다.
아무리 간단한 일이라도 처음에 하려고 하면 도전합니다. 때때로 제품을 작동하기 전에 추가 교육이 필요합니다. 디지털 설계에서는 수동 접근 방식을 잊어버릴 것을 제안합니다. 사용자의 기대는 제품이 충분히 이해하기 쉬워야 하며, 온디맨드(on demand) 또는 문제가 발생할 경우 도움을 기대하게 됩니다. 학습 자료와 빈 상태를 위한 설계를 제공하는 선행 사용자 대신 상황에 맞는 도움말을 제공합니다.
presentation
17. 어떤 제품이 사용될 것인지 인체공학 및 상황을 염두에 두세요.
우리가 이미 정의한 바와 같이 인체공학적 특성을 통해 제품을 실제로 얼마나 쉽게 사용할 수 있는지를 통해 단순화됩니다. 인체공학은 작업장과 제품, 시스템을 운영하는 사람들에게 적합하도록 설계하거나 배열하는 과정입니다. 대부분의 사람들은 이것이 좌석이나 자동차 제어장치와 기구들의 디자인과 관련이 있다고 생각합니다. 그리고 그것은... 하지만 훨씬 더 그렇습니다. 인체공학은 디지털 제품을 포함하여 사람과 관련된 모든 설계에 적용됩니다.
1954년, 심리학자 폴 피트는 인간 모터 시스템을 조사하면서 목표물로 이동하는 데 필요한 시간은 목표물까지의 거리에 따라 다르고 그 크기에 반하여 관련이 있다는 것을 보여주었습니다. 따라서 일반적으로 사용되는 요소가 큰지 확인하고 사용자에게 가까이 배치합니다.
presentation
18. 인라인 편집 및 자동 수집을 지원합니다.
모든 프로세스의 불필요한 상호 작용, 보기, 단계를 모두 제거합니다. 사용자가 시스템을 작동시켜야 하는 최적의 속도가 있습니다. 이를 "흐름 상태"라고 합니다. 그 흐름을 팝업으로 끊지 마세요. 나중에 변경할 수 있는 모든 작업/값에 대해 가능한 한 인라인 편집을 지원합니다. 많은 수의 값을 사용할 수 있을 때 자동 수집합니다.
presentation
19. 스마트 기본값을 사용하여 인지 부하를 줄입니다.
스마트 기본값은 질문에 대한 답변을 제공하는 선택 항목입니다. 따라서 사용자가 양식을 더 빨리 작성할 수 있습니다. 양식을 채우려면 사람들은 양식을 파싱하고, 반응을 공식화한 다음, 양식에 제공된 제공 능력에 답을 입력해야 합니다. 관련 기본값을 정의하려면 설계자는 사용자와 사용자가 제품을 사용할 컨텍스트를 이해해야 합니다. 이는 심층 조사 및 테스트를 통해서만 가능하며, 사용자의 과거 데이터와 사용 패턴을 기반으로 기본값을 조정할 수 있습니다. 대부분의 사용자(예: 90–95%)가 명시적 선택이 필요한 경우 선택할 수 있는 선택으로 항상 기본값을 설정합니다.
presentation
20. 오류를 방지합니다
오류 메시지는 많은 스트레스를 주고 사용자가 작업을 망쳤거나 할 수 없다는 느낌을 줍니다. 입력한 데이터를 자동으로 확인하고 부적절한 데이터 항목에 대한 알림 또는 알림을 제공하여 오류를 줄입니다. 오류가 발생하기 쉬운 조건을 제거하거나 확인하여 작업을 수행하기 전에 사용자에게 확인 옵션을 제공합니다. 파괴적이고 복구할 수 없는 조치는 사용자가 자신의 선택이 가져올 영향을 의식할 수 있도록 강제 기능을 사용하여 보호해야 합니다.
presentation
21. 접근성을 위한 설계입니다
디자이너로서, 여러분의 목표는 접근성을 옹호하고, 여러분의 제품이 더 많은 청중들이 예외 없이 접근할 수 있도록 하는 것입니다. 장애를 가진 사람은 전 세계적으로 10억 명이 넘습니다. 정보를 전달하는 유일한 시각적 수단으로 색을 사용하지 마세요. 텍스트와 배경의 충분한 대비, 키보드 탐색 등을 지원합니다. 접근성은 일부 다른 기능을 가진 사용자 그룹에만 국한되지 않습니다. 접근성을 위해 설계할 때 제품을 사용하는 모든 사용자의 경험을 개선할 수 있습니다.
presentation
결론
제품을 사용하고 이해하기 쉽게 설계하는 것은 쉬운 것이 아니라 가야 할 방법이며, 단순성을 향해 빠르게 나아갈 수 있는 방법이 있습니다.

이 글은 번역 글입니다. 원본 링크입니다.


https://www.facebook.com/groups/224179755005643/

안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp