UX·UI36 [독후감] UX 라이터의 글쓰기 수업 제목 UX 라이터의 글쓰기 수업지은이 마이클 J. 메츠, 앤디 웰플초판 1쇄 발행 2023년 2월 17일 (한국 기준) 전략은 팀에게 ‘정해진 기간에 노력을 집중해야 할 곳’을 알려주는 방향 지시문이다. 즉, 전략은 무엇을 해야 할지를 알려준다. 그리고 기본적으로 하면 안 되는 것을 알려준다. 전략 문구 만들기우리는 (사용자 유형)에게 (사용자 요구)를 제공해서사용자가 (사용자에게 제공되는 가치)를 실현하도록 할 것이다.이는 (회사/조직)의 (경영상 이점)에 도움이 될 것이다. 사용자 경험 연구 기관인 닐슨 노만 그룹에서는 사용자 인터페이스 디자인의 10대 주요 사용성 휴리스틱을 제시한다. UX 라이터가 명심해야 할 한가지 휴리스틱을 제시한다. UX 라이터가 명심해야 할 한가지 휴리스틱은 ‘기억보다 인지.. 2024. 5. 30. 비사이드 포텐데이 403기 디자이너 후기 포텐데이 403기에 디자인 직군으로 참여한 대학생의 찐 후기입니다! 👇 일단 저희 팀이 만든 웹사이트 보고 가세요! ㅎㅎㅎ https://jobterviewee.vercel.app/ https://jobterviewee.vercel.app/ https://jobterviewee.vercel.app/ ‼️ PC로 보셔야 합니다 ‼️ 비사이드 포텐데이란?비사이드는 기획, 디자인, 개발 직군이 함께 하는 사이드 프로젝트 플랫폼이다. 포텐데이는 비사이드에서 운영하는 10일짜리 온라인 해커톤이다. 참여 동기기획자가 필요하다작년 12월 한달간, 취준 중인 프론트엔드 개발자를 도와 웹사이트 UX/UI 디자인을 했는데 무척 재미있었다. 그런데 개발자가 먼저 개발을 해두고, 그 위에 디자인을 얹는 역순서로 진행하다 보니.. 2024. 4. 6. [독후감] 하루 5분 UX 제목 하루 5분 UX 부제 UX/UI 디자인 실무를 위한 100가지 레슨 지은이 조엘 마시 초판 1쇄 발행 2015년 12월 21일 좋은 디자인은 늘 다음 3가지를 전달한다. 1. 이게 무엇(What)일까? 2. 사용자에게 어떤(What) 이득이 있을까? 3. 사용자는 다음 단계로 무엇을(What) 해야 할까? UX 디자이너로서 디자인 작업에 들어가기 전에 자신의 아이디어를 설득시킬 수 있는 충분한 근거를 마련해두어야 한다. 언제 자신이 옳다는 것을 증명해야 할지 모르기 때문이다. ‘수집하기’는 보편적인 행동이지만 우리가 수집하는 것들은 대단히 사적이다. UX 디자인이란 문제를 해결하기 위해 만든 나름 규칙적인 효과다. 다시 말하면 당신이 사람들로 하여금 느끼고, 생각하고, 행동하게 하는 것이다. 그러므.. 2024. 3. 20. 장바구니 아이콘의 2가지 모티프 물건을 판매하는 거의 모든 사이트는 쇼핑카트 메타포를 쓴다. 그리고 지불 방법, 배송 주소 등 특정 항목에 매우 비슷한 형태를 적용한다. 스티브 크룩의 [사용자를 생각하게 하지 마!]에서 이런 내용이 나오는데, 불현듯 이커머스에서 사용하는 장바구니 아이콘이 두 종류라는 것을 깨달았다. 장바구니 아이콘은 Shopping cart 모티프와 Shopping bag의 모티프로 나뉜다. 물건 구매 전 리스트에 담아두는 기능을 우리나라는 '장바구니'로 통일해서 지칭하는데도 (간간이 '쇼핑 백'이라 지칭하는 곳도 있다) '쇼핑 카트' 아이콘에 '장바구니'라고 쓰여 있어도 위화감을 느끼지 못한다. 이미 이커머스의 아이콘 문법에 너무 익숙해져있기 때문인듯하다. 어찌 됐든 아이콘 그림의 차이가 가져오는 의미적 차이가 있을.. 2024. 3. 11. [독후감] 사용자를 생각하게 하지 마! 제목 사용자를 생각하게 하지 마! 부제 웹과 모바일 사용성 원칙으로 디자인하는 UX 지은이 스티브 크록 초판 1쇄 발행 2014년 11월 30일 스티븐 크룩의 사용성 원칙 제1원칙 - 사용자를 고민에 빠뜨리지 마라! 제2원칙 - 클릭 수가 늘어나는 건 괜찮다. 클릭할 때 고민할 필요만 없다면 말이다. 제3원칙 - 각 페이지에 담긴 단어의 절반을 덜어내라. 그리고 남은 부분에서 또 절반을 덜어내라. 웹 사이트든 리모컨이든 회전문이든 무엇이든지 사용성이 뛰어나다는 것은 나에게 있어 다음과 같은 의미다. “평범 혹은 평균 이하의 능력과 경험을 가진 사람이 어떤 사물을 사용해서 무엇인가 하려고 할 때 사용법을 스스로 알아낼 수 있다. 단 투입한 수고에 비해 얻은 가치가 더 커야 한다.” 웹사이트를 명확하게 만들.. 2024. 3. 9. Daily UI 028 / Contact Page 컨택트 페이지 28번째 과제: Contact Page 컨택트 페이지 UI 디자인 - 주제는 video edit software 서비스의 customer support page로 잡았다. - 검색 / 자주 찾는 도움말 / 직접 문의 순으로 구분하였다. - 네이버 고객센터 페이지를 거의 클론 디자인했고, 직접 문의 입력창을 추가하였다. - 네이버와 구글같은 SaaS 대기업은 하위 서비스가 매우 많기 때문에, 서비스별 고객센터 섹션이 있었다. - 네이버 고객센터의 자주 찾는 도움말에서 주제뿐만 아니라, 태그로도 분류하는 점이 좋았다. - 유형의 제품을 판매하는 삼성, 애플의 경우 제품군별로 문의를 분류하였다. - 솔직히 말해서 네이버나 구글이 직접적인 문의를 최대한 찾기 어렵게 숨겨놓은 느낌이 들었다. (사실 느낌만이 아니.. 2024. 3. 8. Daily UI 027 / Dropdown 드롭다운 27번째 과제: Dropdown 드롭다운 UI 드롭다운(Dropdown)이란? 드롭다운 UI는 사용자가 웹사이트나 애플리케이션에서 선택지 중 하나를 선택할 수 있게 해주는 인터페이스 요소이다. 이 요소는 공간을 효율적으로 사용하면서 사용자에게 다양한 옵션을 제공하고자 할 때 유용하다. 드롭다운 메뉴는 클릭 또는 탭으로 활성화되며, 사용자가 선택 가능한 항목 목록을 보여준다. - 드롭다운은 거의 모든 웹사이트에 쓰여서, 어느 레퍼런스를 참고할까 하다가 FAANG과 NAVER의 드롭다운 메뉴를 참고하였다. - 최종적으로는 Google의 Material Design의 가이드라인을 따랐다. 2024. 3. 6. Daily UI 026 / Subscribe 구독 26번째 과제: Subscribe 구독 UI 모달(Modal)과 팝업(Popup) 모달은 사용자의 주목을 특정 내용이나 작업에 집중시키기 위해 사용된다. 모달 창은 주로 백그라운드 콘텐츠 위에 중앙에 떠서 나타나며, 사용자가 모달 외부를 클릭하거나 특정 작업을 완료하기 전까지는 모달 이외의 다른 UI 요소와 상호작용할 수 없다. - 백그라운드 콘텐츠를 어둡게 처리하여 사용자의 주의를 모달 내용에 집중시킨다. - 폼 제출, 상세 정보 확인, 경고 메시지 표시 등 중요한 정보 전달이나 사용자 결정을 요구할 때 사용된다. - 사용자가 모달의 명시적인 닫기 옵션(예: 닫기 버튼, 취소 버튼)을 선택하기 전까지 모달을 닫을 수 없다. 팝업은 사용자에게 알림, 광고, 또는 추가 정보를 제공하기 위해 사용된다. 팝업.. 2024. 3. 6. Daily UI 025 / TV App 텔레비전 앱 25번째 과제: TV App 텔레비전 앱 UI - 스마트 TV에서 구동되는 OTT 앱으로 주제를 정했고 Netflix를 클론 디자인하였다. - TV는 리모콘이라는 제한적인 도구로 컨트롤해야한다는 점에서 GNB의 위치가 매우 고민되었다. 사용성을 고려하다보니 왜 YouTube, Netflix에서 좌측에 GNB를 위치시켰는지 알 것 같았다. 사용자가 콘텐츠를 탐색하는 방식에는 행(row) 단위로 정보를 처리하는 경향이 있다. 상단에 GNB를 배치할 경우, 사용자는 새로운 콘텐츠를 탐색하기 위해 여러 행을 거슬러 올라가야 한다. 반면 좌측에 GNB를 배치하면, 사용자는 현재 행 내에서만 탐색하면 되므로 접근성이 향상된다. 또한 스크롤을 내릴수록 지속적으로 새로운 컨텐츠가 제공되고, 각 추천 항목 내의 영화 수.. 2024. 3. 5. Daily UI 024 / Boarding Pass 탑승권 24번째 과제: Boarding Pass 탑승권 UI 10월에 유럽여행하면서 대한항공, Turkish Airlines, easyJet, Eurail, Omio 등의 다양한 항공사/철도사 어플을 이용했다. 그중 인상깊게 기억하고 있는 앱이 있는데, 바로 Austrian Airlines다. 사실 항공사 앱 느낌이 대체로 비슷하다. 파란색 좋아하고(파란 하늘을 연상시키기 때문인듯) 현대적이다. 그런데 Austrian Airlines은 붉은색이 브랜드 컬러고, 유일하게 세리프체를 사용했기 때문에 눈에 띄었다. 레거시있어보였다. (폰트가 매우 마음에 들어서 찾아보았는데, Portada라는 폰트를 베이스로 쓰고 있다. 출처: https://www.type-together.com/austrian-airlines) .. 2024. 2. 28. 이전 1 2 3 4 다음
