UXUI 아티클(34)
-
[UXUI 아티클 스터디]회사에서 사용자 중심적으로 디자인한다는 것은
🔗 출처회사에서 사용자 중심적으로 디자인한다는 것은✅ 요약좋은 사용자 경험을 만들어야 하는 이유 : 비즈니스 목표를 달성하기 위함회사 비즈니스 목표를 달성하기 위해서는 기술/비용뿐 아니라 사용자 경험을 생각해야 하는 시대회사 비즈니스 목표는 다음 과정을 통해 프로덕트 디자이너에게 도달비즈니스 목표 (사업담당자가 정의 → 매출 10% 증가)프로덕트 목표 (PO가 정의 → 퍼널 전환율 1.5배)사용자 문제 (UX 리서처가 없다면 PO, 프로덕트 디자이너가 → 프로덕트 목표와 관련하여 현재 사용자가 겪는 어려움 발견)솔루션 가설 (PO, UX리서처, 프로덕트 디자이너, 때로는 엔지니어도 함께 → 사용자가 어려움을 해결할 수 있는 가설을 세움)인지부하를 낮추는 프로덕트 (프로덕트 디자이너 혹은 UX/UI 디자..
2024.04.26 -
[UXUI 아티클 스터디]디자인시스템에 모션 가이드 추가하는 방법
🔗 출처디자인시스템에 모션 가이드 추가하는 방법✅ 요약모션은 긍정적인 사용자 경험을 만든다.계층 요소를 이해하는데 도움 : 순서를 이해하듯, 움직임을 통해 전체 서비스 구조를 인지핵심 요소를 강조하는데 도움즉각적인 피드백과 현재 상태를 제공 : 업로드, 메시지 발송 등의 상태를 모션으로 자연스럽게 인지기존 시스템을 분석하고 모션을 적용할 시기와 방법을 고려하는 것이 중요타이밍 커브변형 패턴 (높이, 투명도, 크기 등)전환 방식커뮤니케이션 요소의 모션 (강조, 표현, 정보 제공)포함할 수 있는 모션과도한 모션분석 수행 예시모션 전략을 수립할 수 있고 접근 방식에 대한 명확한 아이디어를 갖고 전체 디자인 시스템에서 일관성을 유지하는 단계, 예측 가능한 환경을 만들 수 있음가이드 원칙효과적인 모션 원칙은 상..
2024.04.25 -
[UXUI 아티클 스터디]모호한 UX 라이팅이 문제라고요?
🔗 출처모호한 UX 라이팅이 문제라고요?✅ 요약💡 UX라이팅은 혼란을 줄이고 이해하고 사용하는데 필요한 시간을 최소화 삭제 방지턱 → 구성요소 삭제 시 사용자에게 돌아갈 수 있는 손해가 있을 수 있음. 서비스가 제공하는 가치가 약해진다면 승인 팝업의 방지턱을 의도적으로 높여야 함.👎 삭제하시겠습니까?👍 정말 삭제하시겠어요? … 더 좋은 추천과 분석을 받을 수 있어요.개념어 설명 → 용어 자체에 긍정적 뉘앙스가 있어 용어를 몰라도 무의식적으로 확인을 클릭함👎 클린봇 활성화👍 클린봇 활성화 … 클린봇은 불쾌감을 주는 메시지를 AI 기술로 감지하여 자동으로 숨겨줘요익영업일에 관해 → 금융 관련 서비스에서 자주보는 용어로 ‘공휴일을 뺀 다음 날’을 의미, 수표 자금화,..
2024.04.24 -
[UXUI 아티클 스터디]UX 심리학 : 타인의 눈을 의식하는 ‘호손효과’
🔗 출처 UX 심리학 : 타인의 눈을 의식하는 ‘호손효과’ ✅ 요약 1. 감시의 눈 효과 트럭에 붙은 왕눈이 ‘눈’ 스티커는 스티커의 반사지 재질이 전조등 빛을 약 200m 후방까지 반사시킬 수 있어 야간에 전방 주시태만을 예방함. (한국도로공사에서 개발) 이것은 ‘감시의 눈 효과(Watching-eye effect)’ 때문. 눈 모양이 있는 것만으로도 사람들은 관찰되고 있다고 느낌으로서 평소보다 더 이타적이고 친사회적으로 행동하게 됨. (출처 : 감시의 눈 효과 연구 논문/다니엘 네튼 외 4인) 예를 들면 기부금 실험을 통해 눈 포스터를 붙여놓았을 때 아무것도 붙이지 않았을 때 보다 사람들이 무언가를 기부할 확률이 높아지는 것을 확인함. (출처 : 기부금 실헌 연구 논문 / 키스 디어 외 2인) 2. ..
2024.04.19 -
[UXUI 아티클 스터디][SOCAR FRAME 만들기 #3] 쏘카 디자이너와 개발자가 컴포넌트를 만드는 방식 (1탄)
🔗 출처 [SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄) ✅ 요약 1. 컴포넌트, 왜 필요한가? (똑같은 UI, 어떻게 재사용하고 있나? 디자이너들은 스케치 심볼 기능을 사용해 비교적 편하게 UI를 재사용하고 있다. 하지만 개발자가 다르다면 똑같은 UI도 매번 다시 확인해야 함. 개발자는 코드를 비슷하게 쓰거나 새로 개발하면서 불편함이 쌓임. 2. 네이밍 통일 명료하게 구분하고 편해야 함 > 버튼을 생성하고 관리하는 방식에 따라 필요한 정보가 달랐던 것. 3. 컴포넌트 네이밍 룰 꼭 필요한 정보만 넣어 이름의 길이를 최대한 줄이자 라는 규칙 > 3가지 사이즈와 디자인 타입으로 구분 / 실제 형태를 기준으로 구분 > 약어를 사용하지 않고 버튼 풀네임으로 명시 컴포넌트와 ..
2024.04.18 -
[UXUI 아티클 스터디] 서울 명동 버스 대란: 실패한 UX 디자인
🔗 출처 서울 명동 버스 대란: 실패한 UX 디자인 ✅ 요약 서울시가 중구 ‘명동입구’ 광역 버스 정류장에 도입한 ‘노선별 대기판’ 운영을 9일만에 중단 운영 변경하게 된 이유 : 이태원 참사 이후 안전을 위해 입석을 금지, 경기도행 광역 버스가 29개로 늘어나면서 혼잡해짐. (정해진 줄을 섰지만 버스가 내 위치에 서지 않음) 변경 전 : 바닥에 적힌 노선 번호에 맞게 줄을 서고, 사람이 많을 땐 정해진 바닥에 줄을 서지 않았음. 변경 후 : 노선별 대기판 13개를 1m 간격으로 세움, 비슷한 방향의 노선을 2~3개 묶어 정차 장소로 지정 결과 : 정류소 주차 공간이 좁아 버스 진입 시간과 차선이 좁아 버스가 출차하는 시간이 늘고 해당 버스 번호에 정차하기 위해 앞 버스가 떠날 때까지 기다려야 함. → ..
2024.04.15 -
[UXUI 아티클 스터디]고객 중심 프로덕트 개선에 ‘A/B 테스트’ 왜 필수일까?
🔗 출처 유저 리서치와 데이터 분석의 협업이 중요한 이유(학부모가 왜 콴다를 사용하나요?) ✅ 요약 💡 온라인 통제 실험(Online controlled experiments) = A/B 테스트 : 제품의 기능이나 서비스에 작은 변화를 주어, 지속적으로 테스트하며 제품을 개선해 나가는 방법론 (고객 중심으로 프로덕트를 개선하고자 하는 기업에 매우 중요한 방법론) 온라인 통제 실험이란? 우리 제품을 사용하는 고객 무작위 추출 (실험군(treatment group) / 대조군(control group) = 5:5 비율) 우리 제품에 관한 도메인 지식, 그 이전의 고객 분석 결과, 실험 결과 등을 바탕으로 가설을 세우고, 이 가설을 기반한 실험적 기능을 제품에 반영 (실험적 기능 = UI, 추천 시스템 또는 ..
2024.04.12 -
[UXUI]아티클 스터디(“유저 리서치와 데이터 분석의 협업이 중요한 이유 -학부모가 왜 콴다를 사용하나요?)
🔗 출처 유저 리서치와 데이터 분석의 협업이 중요한 이유(학부모가 왜 콴다를 사용하나요?) 인식론이란 무엇입니까?(What Is Epistemology?) ✅ 요약 K=JTB 공식 (Knowledge = Justified True Belief 라는 의미. 즉 무언가를 ‘안다’고 하기 위해서는, 우리가 가진 어떤 믿음이 정당화되었는지, 그리고 참인지 여부를 확인해봐야 하는 것) 1. 무엇을 알고자 했는가 콴다를 사용하는 학부모들이 있는데, 이들은 왜 콴다를 사용할까? 2. 실체적 데이터 발굴을 위한 설계 (설문조사를 통해 페르소나 분류) 자가 응답 방식의 데이터 수집 방법인 설문 조사를 통해 페르소나를 분류해보는 것(학부모 모드를 이용하고 있는 학생의 의견이 포함되는 것을 방지하고자) 고등자녀를 둔 학부모..
2024.04.11 -
[UXUI]아티클 스터디(“디자인으로 지구를 지킨다고?” 주목 받는 친환경 UX 디자인)
🔗 출처 “디자인으로 지구를 지킨다고?” 주목 받는 친환경 UX 디자인 ✅ 요약 친환경 UX 디자인 = 지속 가능한 UX 디자인 = 그린 UX 디자인 특징 기존 UX 디자인의 사용성에 환경적 책임감을 더하고 사용자가 환경에 미치는 탄소 발자국을 최소화하기 위해 노력, 디지털 제품 서비스 집중(인지도가 낮아서) 필요성 소프트웨어, 인터넷 서버가 필요로 하는 대량의 에너지 등 디지털 제품의 영향은 간과하는 경우가 많다 온라인 탄소 특정 사이트인 **‘웹사이트 카본’**에 의하면 웹페이지 하나를 볼 때마다 평균적으로 이산화탄소 1.76g이 배출됨(트래픽 10만은 1760kg = 김포공항→도쿄하네다공항 왕복4차례운항 = 내연기관 자동차가 1년동안 배출하는 양) 대표적인 방법 (UI 디자인 개선) 다크 모드와 폰..
2024.04.11 -
[UXUI]아티클 스터디(같은 대기시간도 더 짧게 : 스켈레톤 화면의 힘)
🔗 출처 같은 대기시간도 더 짧게 : 스켈레톤 화면의 힘 ✅ 요약 🖤 스켈레톤 화면이란? 화면을 로딩하는 동안 사용자에게 나타나는 와이어프레임 형태의 화면으로 윤곽을 나타내는 선과 면으로 표현하며 대체로 무채색을 사용. 🖤 스켈레톤 화면의 종류 정적 스켈레톤 화면(Static-Content and-Image Skeleton Screens) → 가장 일반적인 형태, 특별한 모션없이 정지된 상태 애니메이션 스켈레톤 화면(animation Skeleton Screens) → 그라데이션이나 움직임이 추가된 형태, 펄싱 애니메이션(Pulsing animation)과 웨이브 애니메이션(Wave animation)으로 나뉨 펄싱 애니메이션(Pulsing animation) : 일정한 간격으로 깜빡이는, 투명도를 조절..
2024.04.08