UX

UI/UX 디자이너가 잘 잊어버리는 6가지 디자인 포인트

alexly 2023. 8. 23. 13:30

오늘은 UX 디자인에 있어서 잊어버릴 수 있는 6가지 포인트를 소개하려고 합니다.

 

UI/UX 디자이너는 제품 개발 팀에서 매우 중요한 위치를 차지합니다. 그들은 고객과 프로그래머 사이의 다리 역할을 하며, 고객의 인사이트를 해독하고 비즈니스 목표와 조화를 이루어 제품의 기능, 상호작용 및 인터페이스로 전환합니다. 그들은 초기 단계의 작업, 일반적인 전략, 제품 흐름 및 버튼 색상 등의 세부 사항까지 맡을 수 있습니다. 연구 및 디자인 외에도 UI/UX 디자이너는 제품을 최적화하기 위한 데이터 분석 및 테스트 작업도 수행합니다.

UI/UX 디자이너로서 당신은 고객 요구사항 파일부터 완전한 UI까지 제품 개발 과정에 참여합니다. 이러한 작업의 성격은 프로젝트의 핵심 문제를 다루도록 초점을 맞추게 됩니다. 당신의 UI가 고객을 만족시키는 이유는 비즈니스 문제를 해결하는 방식이 아주 좋기 때문입니다. 그래서 때로는 UI의 다른 하위 구성 요소를 잊어버리게 됩니다. 이러한 요소의 부재는 제품이 여전히 잘 작동하지만, 사용자 관점에서는 이러한 구성 요소의 부재로 인해 경험이 상당히 나빠질 수 있습니다. 고객 및 개발 팀에게 가장 완벽한 UI 버전을 제공하기 위해 고급 UI/UX 디자이너가 되기 위해서는 이러한 포인트를 개선해야 합니다.

다음은 많은 신입 UI/UX 디자이너들이 디자인 프로세스에서 잊어버리는 구성 요소들입니다.

1. 온보딩 화면

앱을 처음 다운로드할 , 온보딩 화면이 메인 인트로 화면입니다. 온보딩 화면은 앱의 간략한 소개, 주요 기능 사용 방법을 제공하는 가이드입니다.

온보딩 화면은 간단한 스타일로 디자인되어야하며, 콘텐츠는 필터링되어 주요 기능이 먼저 소개되어야합니다. 온보딩 화면은 정적인 페이지처럼 생성되어 사용자에게 정보를 제공하고 교육하는 사용됩니다. UX 관점에서 온보딩 화면은 사용자가 앱을 시작할 혼란스러움을 피하고 앱의 기능을 스스로 찾아내야하는 번거로움을 덜어줍니다.

App onboarding design by Raquel Sánchez
Walet.vip Onboarding UI Design  by  Alwi Hesa
Cleaner Intro Screen by me

사용자는 앱을 이미 설치했으므로 설명서를 읽을 필요가 없습니다. 사용자는 아직 앱의 UI에 익숙하지 않거나 이를 배우기에 준비가 되어 있지 않습니다. 사용자를 환영하고 앞으로 기대할 만한 경험에 도달하도록 돕습니다.

앱이 사용자의 삶에서 어떻게 사용될 수 있는지를 명시적 또는 암시적으로 이해하도록 돕습니다. 사용자 참여 및 유지에 기여하는 조치를 취하도록 유도합니다.

2. 스켈레톤 로더

스켈레톤은 데이터를 로드하는 동안 표시하려는 콘텐츠를 대체하는 미리 정의된 프레임 세트입니다. 스켈레톤은 UX를 증가시키는 데 도움이되며 페이지/앱에 로드할 데이터가 너무 많은 경우 특히 유용합니다.

스켈레톤의 목적은 데이터가 완전히 로드되기까지 걸리는 시간에 대한 사용자의 기대치를 줄이기 위해 콘텐츠 로딩을 간소화하는 미리보기 프레임워크입니다. 아바타, 카드, 차트, 목록, , 텍스트 콘텐츠, 이미지 요소는 모두 스켈레톤을 가져야합니다.

 

Skeleton Loading Animation  by  Shane Doyle
Facebook
Linkedin

 

언제 스켈레톤 로더를 사용해야 할까요?

콘텐츠가 로드되고 사용자가 상호작용 한 후에는 페이지를 다시로드 할 때 스켈레톤이 필요하지 않습니다.

즉시 표시되는 콘텐츠와 오래 걸리지 않는 콘텐츠에는 스켈레톤이 필요하지 않습니다.

스피너 로딩과 스켈레톤 로딩을 동시에 사용하지 마십시오.

디자인시, 로딩을 알리기 위해 애니메이션 로딩과 함께 다른 레벨의 회색을 사용해야합니다.

콘텐츠와 대응하는 모양을 사용하여 각 모양이 콘텐츠를 나타내도록해야합니다. 예를 들어, 아바타에는 원을, 긴 텍스트에는 직사각형을 사용할 수 있습니다.

3. 빈 상태

빈 상태란 사용자가 페이지에 들어가지만 표시할 것이 없을 때의 상태입니다. 그러면 이 페이지가 데이터가 없는 빈 페이지임을 설명하는 일러스트레이션이 필요합니다. 예를 들어, 빈 할 일 목록 페이지에서는 "할 일 생성" 작업을 추가할 수 있습니다.

처음 사용 시 - 새 Google 드라이브 계정과 같이 표시할 데이터가 없을 때

결과가 없음 / 데이터가 없음 - 검색을 수행하고 쿼리가 비어 있거나 표시할 데이터가 없을 발생합니다(: 데이터가없는 날짜 범위 필터링).

 

Google drive with a hint
Dropbox — The call-to-action button helps you get going without wondering what to do next.

4 . 스플래시 스크린

스플래시 스크린은 사용자가 앱 또는 웹 사이트를 실행할 때 볼 수 있는 소개 화면입니다. 이것은 브랜드 아이덴티티를 구축하고 앱이 백그라운드에서 로드되는 동안 사용자를 매료시키는 기회입니다. 이 화면은 이미지, 그래픽, 로고 또는 애니메이션으로 구성될 수 있으며 때로는 진행률 표시줄과 결합될 수도 있습니다. 스플래시 스크린은 기기가 느렸고 인터넷도 느렸을 때 자주 사용되었습니다.

모바일 앱의 문제는 대기 시간을 감수할 없다는 것입니다. 사용자가 기다려야 수록 앱을 버릴 가능성이 높아집니다. 스플래시 스크린은 사용자의 대기 시간을 괴롭히도록 도와줍니다.

 

Animation splash screen — Medium app
Static splash screen — Binance, Facebook, NALS quest (NALS internal app)

 

5 . 404 오류 페이지

사용자가 존재하지 않는 페이지로 이동하거나, 잘못된 URL 입력하거나, 링크가 끊어져 있는 경우 , 사이트는 404 페이지로 이동시킵니다. 오류 페이지로 이동하는 것은 사용자의 흐름을 방해하고, 사용자는 불만을 느끼며 다시 원래 페이지로 돌아가게 됩니다. 따라서 오류 페이지를 디자인해야 하며, 그렇지 않을 경우 사용자는 웹사이트에 관심을 잃게 됩니다. 이러한 경우 바운스는 제품의 UX 좋지 않음을 나타내는 명확한 신호입니다.

사용자가 사이트를 떠나는 것은 UX 문제가 있는 것뿐만 아니라 SEO에도 나쁜 영향을 미칩니다(404 페이지는 구글의 SEO 순위 요소 하나입니다).

404 Page Not Found  by  Fahime Alizade
Awesome 404 page by Dribbble

 

6 . 인터넷 연결 없음 상태

사용자의 기기가 항상 인터넷에 연결되어 있지는 않거나, 때로는 인터넷이 느릴 때가 있습니다. 비행기에서 사용하거나 와이파이 연결이 갑자기 끊어진 경우와 같이 연결에 문제가 있는 경우, UI 연결에 문제가 있다는 화면을 표시해야 합니다. 이는 상태나 오류와 유사한 문제로, 사용자 경험을 방해하는 문제입니다.

사용자가 연결될 때만 사용 가능한 기능이 있는 경우, 사용자에게 현재 연결 상태에 대한 알림을 제공해야 합니다. 토스트 요소 형식의 "오프라인" 아이콘과 "오프라인 상태입니다"라는 텍스트 레이블을 표시할 있습니다.

Medium toast message

 

반응형