UXUI 주간 아티클

UXUI 해외 주간 아티클 TOP3

🔖 23‘ 7월 1주 | UI 디자인 팁, ChatGPT 만드는 Figma 플러그인, UX 사용자 불만 식별 및 해결

2023.07.05 | 조회 1K |
0
|

from.designer

함께 성장하는 디자이너 커뮤니티

🔖 2023년 7월 1주 TOP3

1️⃣ 빠른 UI 디자인 팁 5

2️⃣ ChatGPT만으로 만든 Figma 플러그인

3️⃣ UX 문제점: 사용자 불만 식별 및 해결


1️⃣ 빠른 UI 디자인 팁 5

1. 단일 열 양식

  • 단일 열 양식은 이해하고 탐색하기 쉬운 깨끗하고 단순한 디자인을 제공합니다.

2. 별표(*) 대신 (선택 사항) 사용

  • 별표(*) 대신 (선택 사항)을 사용하면 양식의 필드가 필수가 아님을 사용자에게 보다 명확하고 쉽게 알릴 수 있습니다

3. 긍정적인 오류 메시지 사용

  • UI 디자인에서 긍정적인 오류 메시지를 사용하는 것은 사용자 경험을 개선하고 보다 사용자 친화적인 애플리케이션 또는 웹 사이트를 만드는 효과적인 방법입니다.

4. 글자 간격을 불필요하게 사용하지 마세요.

  • 글자 간격은 UI 디자인에서 가독성과 시각적 호소력을 향상시키기 위해 효과적으로 사용할 수 있지만 불필요하게 사용하지 않고 신중하게 사용해야 합니다.

5. 우스꽝스러운 배경 사용 금지

  • 우스꽝스러운 배경은 사이트나 애플리케이션의 전반적인 브랜딩이나 디자인과 일치하지 않을 수 있습니다. 이로 인해 디자인이 분리되고 전문적이지 않은 것처럼 보일 수 있습니다.

6. 여백 사용

  • 여백은 사용자 인터페이스의 전체 디자인에서 균형과 조화를 만드는 데 사용됩니다.

7. 자리 표시자로 입력 형식 강조 표시

  • 카드는 다양한 수준의 중요도 또는 복잡성을 가질 수 있는 다양한 옵션 또는 항목을 표시하려는 경우에 더 유용합니다.

. .👇 더 자세한 내용은 아래 원문에서 확인해주세요.


2️⃣ ChatGPT만으로 만든 Figma 플러그인

ChatGPT만으로 만든 Figma 플러그인 코딩이 필요하지 않습니다.

저는 코드를 작성하지 않고 Figma 플러그인을 만들었고 이는 게임 체인저였습니다. 디자이너로서 저는 항상 작업 흐름을 간소화하고 디자인 프로세스를 보다 효율적으로 만드는 방법을 찾고 있습니다. Figma의 플러그인 생태계는 이를 수행하는 훌륭한 방법이지만 많은 디자이너가 코딩에 겁을 먹고 있다는 것을 알았습니다.

그래서 저는 ChatGPT를 사용하여 코드를 생성하고 간단한 작업을 실행하기로 결정했습니다. 저를 믿으세요. 이 블로그는 가능성이 무한하다는 것을 느끼게 해줄 것입니다. 이것은 디자인 세계에서 몇 가지 놀라운 플러그인을 만들기 위한 훌륭한 출발점입니다. 한 줄의 코드를 작성하지 않고 ChatGPT로 Figma 플러그인을 구축한 경험을 안내해 드리겠습니다. 이 단계는 디자인 세계를 위한 멋진 플러그인을 구축하기 위한 여정을 시작하는 데 도움이 될 것입니다.

다시 한번, 가능성은 무한할 것입니다.

1단계: Figma 플러그인 개발 시작

  • 시작하려면 Figma를 열고 상단 메뉴 표시줄에서 "플러그인 > 개발 > +" 옵션을 선택합니다. 이렇게 하면 Figma 플러그인 개발 환경이 열립니다.

2단계: 플러그인 설정

  • Figma 플러그인 개발 환경에서 플러그인 이름을 지정하고 "Figma 디자인" 유형을 선택합니다. 플러그인에는 사용자 인터페이스가 없으므로 "기본 공백" 유형을 선택합니다. 프로젝트 폴더를 컴퓨터의 로컬 저장소에 저장합니다.

3단계: 코드 생성

  • 이제 생성된 프로젝트 폴더를 엽니다. 그런 다음 Visual Studio Code를 사용하여 폴더에 있는 code.js 파일을 엽니다.

직접 코드를 작성하는 대신 ChatGPT를 사용하여 코드를 생성합니다. 다음 프롬프트를 템플릿으로 사용합니다:

[플러그인 기능 설명]이라는 Figma 플러그인 코드를 작성할 수 있도록 도와주세요. UI 없이.

예를 들어, 제가 사용한 프롬프트는 "플러그인이 실행될 때 선택한 프레임의 배경을 파란색으로 변경하고 테두리 반지름을 30px로 설정하는 Figma 플러그인에 대한 코드를 작성하는 데 도움을 주십시오. UI 없이도."

몇 초 안에 ChatGPT는 내 플러그인에 필요한 코드를 생성했습니다. 코드를 복사하여 code.js 파일에 붙여넣습니다. 그런 다음 파일을 저장합니다.

. .   👇 더 자세한 내용은 아래 원문에서 확인해주세요.


3️⃣ UX 문제점: 사용자 불만 식별 및 해결

UX 문제는 대부분의 사람들이 인식하는 것보다 제품 또는 서비스의 소프트웨어 개발에서 더 많은 문제를 야기합니다. 비즈니스에 골칫거리인 UX 문제는 장바구니 포기, 사용자 이탈, 고객 지원 요청에 대한 불만 등의 촉매제가 되는 경우가 많습니다.

UX 문제는 때때로 너무 작아서 숙련된 경험 전문가만이 대화형 기회의 바다에서 지적할 수 있습니다. 자체 자료에서 UX 문제를 발견하는 방법을 탐색하기 전에 먼저 UX 문제가 정확히 무엇인지, 더 큰 사용자 경험 내에서 나타나는 방식의 유형을 이해해야 합니다.

UX 문제점은 무엇입니까?

UX(사용자 경험) 문제는 사용자에게 어려움을 유발하거나 부정적인 감정을 불러일으키는 제품 또는 서비스와의 디지털 상호 작용 영역 또는 디지털 상호 작용입니다.

그들은 종종 사용자가 목표를 달성하는 것을 방해하는 장애물이거나 효율적으로 감소하는 사용자 흐름의 회선입니다. UX 문제는 사용자 자체를 차단하지 않는 사소한 불편부터 사용자가 제품이나 서비스를 완전히 사용하지 못하게 하는 주요 문제까지 다양합니다.

UX 문제점의 예로는 느린 페이지, 혼란스러운 탐색, 지원 옵션 부족, 제한된 기능 또는 사용자 중심이 아닌 디자인이 있습니다.

UX 문제점을 해결하는 것은 만족과 유지를 개선하고 제품 또는 서비스의 전반적인 성공을 높이는 데 중요합니다.

UX 문제점 유형

다음은 제품 또는 서비스의 전반적인 경험에 일반적으로 영향을 미치는 몇 가지 유형의 UX 문제점입니다.

이러한 유형의 문제점은 번거로운 메뉴 또는 웹 사이트 구조로 인해 자주 발생합니다. 여기에는 불명확한 사이트 계층 구조 또는 사용자가 현재 사이트의 어디에 있는지 알 수 있는 이동 경로가 없는 경우가 포함될 수 있습니다.

검색 기능이 없고 사이트 전체에 걸쳐 레이블이 일치하지 않는 의류 브랜드의 웹사이트를 생각해 봅시다. 사용자가 여성용 블라우스를 찾고 "셔츠"라고 표시된 드롭다운 메뉴를 클릭했지만 그 아래 나열된 블라우스가 보이지 않는다고 상상해 보십시오.

사이트 디자이너는 블라우스가 "전문가 복장" 아래에 나열되어 있다는 것을 알 수 있지만 검색 기능이 없으면 사용자는 혼란스러워하고 쇼핑 경험을 완전히 포기합니다. 이것은 비즈니스에 직접적인 영향을 미치는 탐색 문제의 예입니다.

사용성 문제점

이러한 문제는 사용자가 제품 또는 서비스와 얼마나 쉽게 상호 작용할 수 있는지와 관련이 있습니다. 이러한 UX 문제점에는 지나치게 복잡한 체크아웃 프로세스, 찾기 어려운 기능 또는 전체 경험을 풍부하게 하는 대신 방해하는 도구가 포함됩니다.

의도한 대로 작동하지 않는 사용자 도구의 최근 예는 증강 현실(AR)을 디지털 쇼핑 경험에 통합하려는 초기 시도에서 찾을 수 있습니다. 많은 온라인 브랜드는 사용자가 오프라인 매장에 가지 않고도 제품을 "착용"할 수 있는 AR 기능을 통합하려고 시도하고 있습니다.

이러한 기능이 작동하면 기업은 막대한 자본을 절약할 수 있지만 이러한 기능의 실패는 극도로 해로운 영향을 미칩니다.

예를 들어 AR을 활용하여 스마트폰의 카메라를 사용하여 선글라스를 "착용"하는 선글라스 가게를 생각해 보십시오.

이 도구를 사용하려고 시도하는 사용자가 버그가 있는 경험을 발견하거나 탐색 중인 제품을 정확하게 표시하지 않으면 사용자가 제품에 더 쉽게 액세스할 수 있도록 의도한 경우에도 좌절감과 소비자 만족도 저하로 이어질 수 있습니다. 모두.

정서적 고통 포인트

사용자가 경험을 느끼는 방식은 비즈니스를 추천하거나 복귀할 가능성에 큰 영향을 미칠 수 있으며, 정서적 고통은 기업이 부정적인 감정을 유발하는 경험 영역을 식별하는 데 도움이 됩니다. 심리학과 사회학은 정서적 고충을 검토할 때 자주 사용되며 접근성도 이러한 종류의 고충에 영향을 미칠 수 있습니다.

음식 공급 회사의 웹사이트를 상상해 봅시다. 알레르기 고려 사항은 이제 대규모 행사를 위한 식품 선택에 큰 역할을 합니다. 회사에 직접 연락해야만 알레르기 정보를 찾을 수 있는 웹 사이트는 사용자가 해당 회사를 일반적인 안전 문제를 위해 추가 조치를 취해야 하는 짜증과 연관시킬 수 있습니다.

모든 알레르기 경고를 제품 페이지에 직접 나열한 음식 공급 회사는 고객의 요구에 대한 추가 고려 사항을 보여줍니다. 이러한 종류의 상호 작용은 사용자가 재방문 고객이 될 가능성을 높이는 긍정적인 감정적 반응을 이끌어냅니다.

. .   👇 더 자세한 내용은 아래 원문에서 확인해주세요.

 

🎄from.designer 

함께 성장하는 디자이너 커뮤니티 from.designer 는 디자이너의 경험 공유 모임을 기반으로 UXUI 스터디, 독서모임, 특강 등 다양한 프로그램을 운영하는 디자이너 중심의 커뮤니티입니다. 디자인, 디자이너에 관심있는 누구나 참여 가능한 오픈 플랫폼입니다.


🗓️
행사 일정 & UXUI 자료 

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

💭 단톡방 가입문의  (1,900명)

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

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




 

다가올 뉴스레터가 궁금하신가요?

지금 구독해서 새로운 레터를 받아보세요

✉️

이번 뉴스레터 어떠셨나요?

from.designer 님에게 ☕️ 커피와 ✉️ 쪽지를 보내보세요!

댓글

의견을 남겨주세요

확인
의견이 있으신가요? 제일 먼저 댓글을 달아보세요 !

© 2024 from.designer

함께 성장하는 디자이너 커뮤니티

자주 묻는 질문 오류 및 기능 관련 제보

서비스 이용 문의admin@team.maily.so

메일리 (대표자: 이한결) | 사업자번호: 717-47-00705 | 서울 서초구 강남대로53길 8, 8층 11-7호

이용약관 | 개인정보처리방침 | 정기결제 이용약관