🔖 2021년 5월 1주 TOP3

🔖 2021년 5월 1주 TOP3

UI가 지저분합니까? 피해야 할 7가지 일반적인 실수

고퀄리티의 프로덕트를 만드는 데 있어서, 모든 세부 사항들은 아주 중요합니다.

많은 사람들이 좋은 UX 또는 좋은 UI 중에 무엇이 더 중요한지에 대해 논쟁하는데요, 저는 항상 두 가지 모두를 말하는 경향이 있습니다. 하나라도 엉망이면 사용자에게 영향을 줄 수 없기 때문이죠. 하지만 보통 사용자들은 UX가 무엇인지에 대해서는 전혀 생각하지 않고 오직 외관에 따라 제품을 평가하곤 합니다.

 1. 범위 무시 / 잘못된 계획

'Lorem ipsum'이 포함된 프로덕트와 스톡 사진을 얼마나 자주 사용하셨나요? 이젠 안됩니다.

여러분들이 디자인 스킬을 한층 더 레벨업하고자 한다면, 프로덕트의 최종 케이스가 될 수 있는 형태를 디자인해보세요. 실제로 어떤 이미지가 표시될 것이며, 제목은 또 얼마나 길까요? 당신의 아름다운 디자인에서 실제 들어갈 내용으로 채워지게 되었을 경우, 디자인이 깨질 수도 있습니다.

특히 UI 디자인 작업을 시작하기 전에 페이지의 각 섹션마다 어떤 종류의 콘텐츠가 표시될지도 알아야 합니다. 또한 콘텐츠의 최소 및 최대 크기도 알아야 합니다. 인터페이스가 언제 어떻게 변경될지를 보여주기 때문에, 이러한 전환 지점을 에지 케이스(*edge case)라고 부릅니다.
‍
이미지 선택

이미지 제한 사항도 고려해야 합니다. 고객이 사용자 지정 사진을 가지고 있지 않거나 구매하지 않았을 경우 'Unsplash'의 아름답지만 무의미한 사진을 사용하는 것은 의미가 없습니다.

왜 그럴까요? 사진은 개념적인 경향이 있습니다. 예쁜 것으로만 사용하는 것은 충분치 않습니다. 대신 여러분은 서술적이거나, 단순히 더 깊은 의미를 창조하는 이미지를 선택해야 합니다.
 ‍
무엇을 하든지 간에, 그 위치에 있을 필요가 없는 사진은 사용하지 마세요. 요즘 사람들은 엄청난 양의 정보에 압도당합니다. 쓸데없는 시각적 정보 한 조각은 그들을 짜증 나게 할 뿐입니다.

반복 블록 이해

또 다른 에지 케이스의 경우에는 이미지 + 텍스트, 아이콘 + 텍스트, 숫자 + 텍스트 등과 같이 반복되는 블록과 관련이 있습니다. 이 블록이 2줄의 텍스트와 혹은 10줄로 했을 때는 어떻게 보이게 될지, 그리고 이것들이 하나씩 서 있을 때에 대해서도 생각을 해야 합니다.

기능을 설명하는 작은 텍스트 블록의 경우 3 열 레이아웃을 쉽게 사용할 수 있습니다. 하지만, 만약에 5줄 이상의 텍스트를 가지고 있고, 줄임표 없이 모두 표시해야 하는 경우라면, 다른 시각적인 해결책을 찾아야 합니다. 왜냐고요? 긴 텍스트를 가진 열을 읽는 것은 신문에서는 좋을지 몰라도, 웹에는 결코 편리하지 않기 때문입니다. 가능한 해결책으로는 가로 스크롤 또는 2열 레이아웃의 슬라이드 사용이 포함될 수 있습니다.

 확장 계획

콘텐츠의 에지 케이스를 알면 화면 공간을 보다 더 효율적으로 사용하고, 각 인터페이스에 적합한 UI 처리를 선택할 수 있습니다. 하지만 에지 케이스는 현재 여러분이 가지고 있는 것에만 국한되지 않는다는 것을 기억하셔야 합니다. 훌륭한 디자이너는 클라이언트가 향후 UI를 확장해야 할 수 있도록 항상 사전 예방적으로 생각하여야 합니다.
‍ ‍
2. 기본과 보조 액션의 차이 없음

앱으로 작업할 때 사용자가 수행할 수 있는 많은 작업들이 있습니다. 기본 작업에 시각적인 중요성을 부여하는 것이 중요합니다. 모든 탐색은 버튼을 통해 이루어지기 때문에 기본 버튼을 굵고 두드러지게 만들어 사용자가 쉽게 식별할 수 있게 해야 합니다. 보조 액션은 덜 두드러지게 나타나야 하지만, 그래도 사용자가 찾는 경우를 대비해 여전히 보여줘야 합니다.
 ‍
기본 버튼과 보조 버튼을 구별하는 방법은 다음과 같습니다.

3. 답답한 오류 상태

사용자 인터페이스를 디자인할 때, 사용자 인터페이스의 주요 목적인 사용자와 서비스 간의 상호 작용을 최대한 원활하게 제공해야 한다는 것을 잊지 마세요. 인터페이스는 의심, 대답 없는 질문 또는 어떤 종류의 불확실성과도 해당되지 않습니다.

디자이너는 특히 오류 상태의 경우, 사용자에게 오류 상태에 대한 명확한 피드백을 제공해야 합니다. 따라서 오류 알림은 다음과 같은 간단한 규칙을 충족해야 합니다.

디자이너는 예기치 않은 오류(예 : 서버 오류, 페이지를 찾을 수 없음)도 처리해 주어야 합니다. 오류 메시지는 사용자 흐름에 방해가 됩니다. 그렇기 때문에 사용자가 이를 처리하고, 가능한 해결책을 제공해 주어야 하며, 특히 사용자의 실수가 아닐 경우에는 나쁜 경험을 원활하게 처리할 수 있도록 도와야 합니다.
예를 들어, 404 및 500 페이지에 대한 일러스트레이션이나 애니메이션을 디자인하는 것도 좋은 해결책일 수도 있습니다..
. 
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

UX 디자이너를 위한 정보 아키텍처

기본 문서화 및 더 나은 설계에 대한 가이드

디자인 팀이 제품 전체 아키텍처를 생각하지 않으면  많은 프로젝트가, 제대로 진행되지 않고, 이해 관계자의 승인을 받지 못하며, 사용자도 제품을 이해하지 못합니다.

이것은 여러분이 무언가를 만들기 시작하기 전에  수개월을 IA 문서작성에 소비해야 한다는 것이 아니라

1. 그것이 어떻게 작용할지  
2. 콘텐츠가 어떻게 연결될 것인지  
3. 모든 것이 어디에 적합한지에 대한  
기본적인 생각을 갖는 것 입니다.

정보 아키텍처의 정의는
1. 연구, 이해 및 문서화를 위해 수행하는 모든 것
2. 제품 컨텐츠가 서로 연결되는 방식
3. 사용자가 탐색하는 방법 입니다.

대규모 웹사이트나 특히 정부 프로젝트에서 문제를 자주 접하게 되는데  많은 전문가가 필요할 만큼 큰 문제가 발생합니다. 하지만 전문가를 고용할 수 있는 프로젝트가 진행되기를 기다릴 필요는 없습니다.

IA 전문가가 아니더라도 UX Designer가  작성할 수 있는 다양한 IA 문서가 있습니다. IA 문서작성은 문제 공간을 파악한 후  화면 설계를 시작하기 전에 IA를 문서화해야 합니다.

사용자 중심 설계 프로세스의 예는
1. "정의" 단계에서 IA를 찾는 화살표가 있습니다.
2. "이해" 단계에서 요구사항을 수집하는데 도움되는 자료로 사용했지만

모든 IA 문서의 최종 버전은 화면이 생성되기 전에 IA 문서의 최종 버전에 동의해야 합니다.

그 이유를 알아보려면 계속 읽어보십시오.
.
. 
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

포트폴리오를 돋보이게 만드는 방법

시각적 디자인에서 데이터 분석 및 사용자 연구에 이르기까지 디자인 기술의 범위가 점점 증가하고 있습니다. 그리고 디자인 포트폴리오와 포트폴리오 사례 연구도 증가하고 있습니다.

동일한 사례 연구가 있는 포트폴리오 수천 개가 만들어지면서 더 많은 디자이너에게 눈에 덜 띄는 방법을 가르치기 위해 부트캠프가 등장합니다.

부트캠프는 여러분의 기술로 개성을 나타나게 하는 것이 불가능하기 때문에 포트폴리오를 작업하는 분들에게는 좋은 방법이 아닙니다. 고용주 또한 동일한 포트폴리오를 구별하는 것이 어렵기 때문에 좋지 않습니다.

후보자가 특정 기술을 보유하고 있는지 여부에 대한 답변에 도움이 되지 않는 포트폴리오를 만들고 검토하는 데 몇 시간이 낭비됩니다.

우리는 왜 이런 포트폴리오들이 존재하는지 잊어버리고 완성만을 최종 목표로 여기기 시작합니다. 고용관리자들은 그들이 그것을 요구해야 한다고 생각하고 후보자들은 그것을 보여줘야 한다고 믿습니다.

이러한 악순환에서 벗어나기 위해서는 현재의 일반적인 사례 연구 내용을 살펴보고 프로젝트에 참여한 기술과 전문 지식을 더 잘 제시할 수 있는 방법을 마련해야 합니다.

다음은 일반적인 사례 연구와 여러분이 누구인지와 여러분의 독특한 기술을 보여주는 방법을 보여줍니다.

[1] 저의 과정입니다.

1-1 무엇을 보여주어야 하나요?
여러분은 책을 많이 읽고 디자인 과정이 종이 위에서 "어떻게" 보여야 하는지 알고 있을 것입니다.

1-2 고유한 맥락에서 작업을 어떻게 계획했습니까?
사용자에 대해 배우고, 사용자의 요구와 미션을 수행하는 과정에서 다양한 장애물을 어떻게 극복했는지 들려주세요.

1-3 어떻게 하면 더 나아질까요?
모두 생략하거나 자신의 이야기를 해주세요.

[2] 창문에 포스트잇이 붙여있다면

2-1 그건 무엇을 보여주는 것일까요?
특정 솔루션에 뛰어들기 전에 광범위한 아이디어를 파악하고 고려할 수 있습니다. 프로세스에 팀 및 이해 관계자를 참여시킬 수 있는 능력입니다.

2-2 어떻게 하면 더 나아질까요?
위 사항에 대해 이야기를 해주세요.

[3] 페르소나

3-1 대부분의 경우
두세명의 사용자와 대화한 후 일반화할 수 있으며 성별과 같은 제품 특성과는 무관하게 합성할 수 있습니다.

3-2 이게 뭘 보여줄까요?
사용자를 배려하고 사용자, 수행해야 할 작업 및 요구 사항에 대해 배웠습니다. 팀에서도 사용자를 배려하도록 만들 수 있었습니다. 그리고 위의 모든 것이 제품 결정에 어떻게 영향을 미쳤는지 어떻게 알수 있을까요.

3-3 어떻게 하면 더 나아질까요?
사용자를 이해하는 과정은 페르소나를 만드는 것으로 제한될 필요가 없으며 수행해야 할 작업에 대한 이해나 행동 원형을 만드는 것과 같은 많은 다른 접근 방식들이 있습니다.

만약 당신이 당신의 업무와 성별, 관계 상태 그리고 나이와 같은 속성들을 당신의 제품과 당신의 사용자의 행동을 예측할 수 있다면 좋습니다.

그렇지 않은 경우엔 사용한 방법, 배운 내용 및 설계에 어떤 영향을 미쳤는지 보여줍니다.
.
. 
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램