archuive

Figma는 UI/UX 디자이너들이 효율적으로 작업할 수 있도록 다양한 기능을 제공합니다. 그 중에서도 도형이나 레이어를 미세하게 조절할 수 있는 Nudge Amount 설정은 작업의 정확성을 높여줍니다. 이번 글에서는 Nudge Amount를 설정하고 활용하는 방법에 대해 소개하겠습니다.  Nudge Amount란 무엇인가요?Nudge Amount는 Figma에서 화살표 키를 사용해 도형이나 레이어의 위치를 이동할 때, 한 번에 얼마나 이동할지를 설정하는 기능이에요. 기본 설정은 작은 이동(Small Nudge)은 1픽셀, 큰 이동(Big Nudge)은 10픽셀이에요. 이 값을 조절하면 작업이 훨씬 더 수월해진답니다. Nudge Amount 설정하기Nudge Amount를 설정하는 방법은 다음과 같습니..

이 글은 닐슨 노먼 그룹(Nielsen Norman Group)의 아티클을 읽고 번역한 글입니다.원문은 🔗 이곳에서 확인 가능합니다.    사용자는 콘텐츠를 찾고 기능을 사용하기 위해 메뉴에 의존합니다. 이 체크리스트를 사용하여 메뉴가 제대로 작동하는지 확인하세요. 너무 자주, 우리는 혼란스럽거나 조작하기 어려운 메뉴로 인해 사용자가 어려움을 겪는 것을 목격합니다. 이 가이드라인을 따르면 사용자가 메뉴를 통해 쉽게 콘텐츠를 찾고 기능을 활용할 수 있게 됩니다.탐색 메뉴 가시성 확보1. 큰 화면에서는 탐색 메뉴 표시데스크탑 웹사이트와 앱에서는 햄버거 메뉴를 사용하지 않는 것이 좋습니다. 화면에 메뉴를 숨기지 말고, 충분한 공간이 있을 때는 메뉴를 명확히 표시하세요. 탐색은 단순히 경로를 안내하는 역할뿐만..

메뉴는 웹사이트와 애플리케이션에서 사용자가 콘텐츠를 찾고 기능을 사용하는 데 중요한 역할을 합니다. 사용자가 쉽게 이해하고 조작할 수 있는 메뉴를 제공하는 것은 좋은 사용자 경험(UX)을 제공하는 데 필수적입니다. 효과적인 메뉴 디자인은 사용자가 사이트나 애플리케이션을 사용하는 데 있어 중요한 요소입니다. 체크리스트를 활용하여 메뉴를 점검하고 개선하면 사용자가 보다 쉽게 콘텐츠를 찾고 기능을 활용할 수 있게 됩니다. 이러한 가이드라인을 따르면 사용자 경험을 향상시켜보세요!     이 PDF 파일의 자세한 적용은 아래의 글에서 확인해보세요. 😎  웹사이트 메뉴 디자인 체크리스트 : 17가지 UX 가이드라인으로 사용자 경험 향상하기이 글은 닐슨 노먼 그룹(Nielsen Norman Group)의 아티클을..

디지털 프로덕트를 만드는 UI/UX 디자이너 여러분께서는 사용자 경험을 최적화하기 위해 다양한 요소를 고려하셔야 하죠. 그 중에서도 UX Writing은 사용자와 인터페이스 간의 소통을 원활하게 하는 중요한 역할을 합니다. UX Writing에서 사용하는 문체는 사용자 경험에 큰 영향을 미치며, 적절한 문체를 선택함으로써 사용자에게 더 나은 경험을 제공할 수 있습니다. 이번 글에서는 해요체와 합니다체를 언제, 어떻게 사용하면 좋을지 예시를 통해 알아보겠습니다.🤓해요체의 사용해요체는 친근하고 부드러운 느낌을 줍니다. 사용자가 인터페이스와 상호작용할 때 편안함을 느낄 수 있도록 도와줍니다. 다음과 같은 상황에서 해요체를 사용하는 것이 적합합니다:온보딩 과정: 처음 앱을 사용하는 사용자에게 친근하게 다가가고..

프로덕트 디자이너로서 우리는 북마크, 즐겨찾기, 핀, 별표와 같은 용어를 자주 접합니다. 이 기능들은 간단해 보일 수 있지만, 구현 방식에 따라 사용자 경험(UX)에 큰 영향을 미칩니다. 이 글에서는 이러한 요소들을 접근하는 방법을 다루며, 모호성을 줄이고 사용자 만족도를 높이는 방법을 공유합니다.기본 개념 이해하기북마크(Bookmarks): URL이나 문서를 나중에 쉽게 접근할 수 있도록 저장하는 기능입니다. 주로 웹 브라우저에서 사용되며, 예를 들어 사용자가 중요한 정보를 빠르게 찾을 수 있도록 도와줍니다.즐겨찾기(Favourites): 사용자가 자주 사용하거나 선호하는 항목을 빠르게 접근할 수 있도록 표시하는 기능입니다. 예를 들어, 쇼핑몰 웹사이트에서 자주 구매하는 상품을 즐겨찾기에 추가할 수 있..

디자인은 단순히 시각적인 요소를 아름답게 만드는 것 이상의 의미를 가지고 있습니다. 디자인의 핵심은 사용자 경험을 향상시키고, 정보 전달을 효율적으로 하는 데 있습니다. 이번 글에서는 정보와 경험의 구분이 디자인 시스템의 성숙도에 어떻게 기여할 수 있는지에 대해 논의해보겠습니다.정보와 경험의 차이정보는 우리가 전달하려는 사실, 데이터, 지식 등을 의미합니다. 반면 경험은 사용자가 정보와 상호작용하면서 느끼는 감정과 인식을 포함합니다. 예를 들어, 웹사이트의 콘텐츠는 정보이고, 그 웹사이트를 탐색하는 과정에서 사용자가 느끼는 것은 경험입니다.성숙한 디자인 시스템의 특징성숙한 디자인 시스템은 단순히 정보를 제공하는 것에 그치지 않고, 사용자의 경험을 고려합니다. 정보와 경험을 균형 있게 조화시켜야 합니다. ..

Framer에서 손쉽게 콘텐츠를 관리할 수 있는 CMS 기능.CSM의 Settings 화면에는 페이지별 Description을 어떻게 구성해 보여줄지 설정이 가능하다. Google 검색 센터의 우수한 메타 설명을 만들기 위한 권장사항 살펴보자.좋은 예와 나쁜 예를 이해하기 쉽게 정리해두었다.

피그마에 화면을 나열하다보니 궁금한게 생겼다, 어디로 확장해야하지?UI/UX를 디자인 할 때 고민해야 할 화면의 진행 방향성에 대해 작업자들이 동의할 수 있는 레퍼런스가 있는지 궁금했다.그러다가 찾아보게된 화면 흐름도 (Screen Flow Diagrma), 정보 구조도 (Information Archtecture), 유저 플로우 (User Flow)! 화면 흐름도 (Screen Flow Diagram)유저가 서비스를 이용하는 흐름이나 기능을 정의하기 위해 만드는 문서이다.화면이나 기능 단위로 유저의 동선을 설계하게 되며, 화살표와 도형을 사용해 도표(Diagram)을 만든다.특징화살표를 따라가다보면 사용자가 어떤 프로세스로 서비스를 이용하는지 파악할 수 있다.각 도형의 의미가 명확해 작업자들이 설계할 ..

2022년이 마무리되며닐슨 노먼 그룹에서 한 해 발행된 사용자 경험 아티클 중 가장 많은 청중을 모은 글 10가지를 공개했다.Data Tables: Four Major User Tasks테이블은 1)특정 기준에 맞는 레코드 찾기 2)데이터 비교 3)단일 행 데이터 보기/편집/추가 4)레코드에 대한 작업 수행과 같은 일반적인 유저 태스크 네가지를 지원해야한다.UX Strategy: Definition and ComponentsUX 전략은 솔루션을 설계하고 구현하기 전에 목표 달성 방향에 대한 이해를 공유하는 3단계 계획이다. 시간이 지남에 따라 UX 작업의 우선 순위 지정 및 실행을 안내하는 역할을 한다.Best Font for Online Reading: No Single Answer가독성 높은 폰트 중..

다음 글은 The power of naming convention  을 번역한 글입니다.우리는 모두 누군가(아마도 상사일 것입니다) 최신 이메일이나 게시판을 찾거나 얼마전에 만든 파일을 공유해 달라고 요청하면 찾기가 어려웠던 경험이 있었을 것이다.어디에 있지?어떻게 찾지?어떻게 다시 이름 붙이지?아마도 파일은 와 같이 이름 붙어 있을것이며, 특별히 이 파일을 작업하지 않은 사람에게는 의미가 없는 이름입니다.이와 같은 상황은 드물지 않습니다. 사람들이 다양한 비즈니스 상황에서 자산을 찾는 데 어려움을 겪는 연구를 관찰한 후 어떤 기술이 이 패러다임을 바꿀 수 있는지 궁금했습니다.즉, 상속된 명명 규칙이나 구조 내에서 어떻게 탐색 할 것인가?원하는 결과에 도달하기 위해 다른 방법을 적용할 수 있는가?검색이..