반응형

Design/Methodology 12

필터를 디자인할 때 고민해야할 UI 및 UX

UXPin의 Filter UI and UX 101 – An In-Depth Guide 를 참고해 작성된 글입니다.필터는 사용자 인터페이스 디자인에서 강력한 도구로, 사용자 여정을 간소화하고 효율성과 콘텐츠 발견을 통해 사용자 참여를 높이는 데 기여합니다. 이 글에서는 UI 필터 디자인의 기본 원칙과 실무 사례를 통해 사용자 친화적인 필터 패턴을 설계하는 방법을 탐구합니다. 또한, 주요 기술 기업들의 예시를 통해 필터가 사용자 경험을 어떻게 향상시키는지 살펴봅니다.UI 필터란 무엇인가?UI 필터는 사용자가 특정 기준에 따라 데이터 집합이나 옵션을 좁히는 데 사용하는 디자인 요소입니다. 예를 들어, 전자상거래 사이트에서 사용자는 사이즈, 색상, 가격 등을 기준으로 제품을 검색할 수 있습니다. 필터 UI는 사..

Design/Methodology 2024.07.15

바우하우스에서 배우는 협업과 창의성: 현대 UX 디자인에 적용하기

안녕하세요,  오늘은 바우하우스(Bauhaus) 운동에서 영감을 받아 협업을 통한 창의성을 찾는 방법에 대해 깊이 있게 탐구해보려고 합니다. 이 글은 Google Design의 Jens Riegelsberger가 Medium에 기고한 글을 번역한 것으로, 바우하우스 철학이 현대 UX 디자인에 어떻게 적용될 수 있는지 살펴보겠습니다. 바우하우스: 협업에서 창의적 영감을 찾다UX 디자인과 바우하우스 철학UX 디자인은 아직 초기 단계에 있으며, 종종 최근의 기술적 능력에 너무 집착하는 경향이 있습니다. 이는 장기적인 관점을 흐리게 할 수 있습니다. 이에 대한 해결책으로, 저는 한 세기 전으로 돌아가 바우하우스 초기 시절에서 영감을 찾는 것이 유용하다는 것을 알게 되었습니다.바우하우스는 장식적 요소를 비판적으로..

Design/Methodology 2024.06.30

일론 머스크가 아이들에게 가르쳐야한다고 주장한 50가지 인지 편향

일론 머스크는 공학 및 혁신 분야에서 탁월한 성과를 이루며, 그 성공의 비결로 '기본 원칙 사고(first principles thinking)'를 강조합니다. 그는 최근 트위터를 통해 인지 편향을 어릴 때부터 가르쳐야 한다고 주장하며, 50가지 주요 인지 편향을 소개했습니다. 이 편향들은 우리가 일상생활과 업무에서 더 명확하고 논리적인 사고를 할 수 있도록 도와줍니다. 50가지 인지 편향 목록⭐️ 기본 귀인 오류 (Fundamental Attribution Error): 타인의 행동은 성격 때문이고, 자신의 행동은 상황 때문이라고 생각하는 경향.⭐️ 자기 중심 편향 (Self-Serving Bias): 성공은 자신의 능력 덕분이고 실패는 외부 요인 때문이라고 믿는 경향.내집단 편애 (In-Group F..

Design/Methodology 2024.06.27

UI/UX 개선을 위해 점검할 7가지 마법 체크리스트

문제를 식별하고 웹/앱을 최적화하는 손쉬운 방법디지털 제품이 사용자 기대에 미치지 못하면, 사용자는 대안을 빠르게 찾기 시작합니다. 웹사이트가 멋지고 다양한 기능을 갖추고 있어도, 정작 사용자들이 원하는 기능이 어디에 있는지 찾지 못하면 무용지물입니다. 높은 전환율을 기대했지만 결과가 좋지 않은 이유는 무엇일까요?테스트를 시작하기 전에, "7가지 마법"을 통해 웹 또는 앱을 점검해 보세요. 이 효율적인 방법은 숨겨진 문제를 드러내어 마법처럼 작동합니다.그렇다면 "7가지 마법"이란 무엇일까요? 나른한 저녁 식사 시간에 손님들이 접시에 음식을 담고 있는 장면을 상상해보세요. 무엇이 문제일까요? 음식이 맛이 없어서? 서비스가 좋지 않아서? 손님들이 배가 고프지 않아서? 아니면 분위기가 너무 여유로워서?디지털 ..

Design/Methodology 2024.06.26

웹사이트 메뉴 디자인 체크리스트 : 17가지 UX 가이드라인으로 사용자 경험 향상하기

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

Design/Methodology 2024.06.21

[PDF] 메뉴 디자인 체크리스트: 17가지 UX 가이드라인

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

Design/Methodology 2024.06.21

[UX Writing의 비밀] 해요체와 합니다체를 완벽히 활용하는 방법

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

Design/Methodology 2024.06.20

북마크, 즐겨찾기, 핀, 별표의 디자인 차이점

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

Design/Methodology 2024.06.19

정보와 경험의 구분이 디자인 시스템의 성숙도에 기여하는 방법

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

Design/Methodology 2024.06.18

디자이너는 화면의 흐름을 어떻게 표현할까? - 화면 흐름도, 정보 구조도, 유저 플로우로 알아보기

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

Design/Methodology 2024.03.28
반응형