본문 바로가기

UX

 (22)
스티비 인터랙션 디자이너가 추천하는 필독서 올해 초 스티비팀에 합류하며 편집 디자이너에서 인터랙션 디자이너로 포지션을 변경하였습니다. 스티비에서 필요한 디자이너는 웹사이트를 프론트엔드 개발자의 도움 없이도 스스로 구현할 수 있는 역량과 함께 사업 전체를 함께 고민하는 전방위 디자이너입니다. 직무 변경을 1주일 앞두고 앞으로의 업무에 대해 두려움을 느끼고 있을 때, 스티비 팀원들이 추천해주신 책들이 많은 도움이 되었는데요. 그때 추천 받은 책 3권을 공유하려 합니다. 시미즈 료(지은이) | 조지은 | 에이콘출판 | 더 알아보기 1. 생활 교양 프로그래밍 입문스티비 팀에 합류했을 당시, 저는 CSS와 RSS의 차이도 모르는 인쇄전문 편집 디자이너였습니다. 팀을 옮기며 첫 번째로 받은 직무는 HTML과 CSS를 배우는 것, 그후 이를 활용해 이메일 뉴..
UX를 전문적으로 배울 수 있는 강좌와 스터디를 소개합니다. 사용자 경험(User Experience, UX)은 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하게 되는 지각과 반응, 행동 등 총체적 경험을 말합니다. UX는 현재에 소프트웨어뿐만 아니라 산업을 통해 제공되는 서비스, 상품, 프로세스, 사회와 문화에 이르기까지 널리 응용되어 사용되고 있습니다. 그렇다면 UX를 어디서 전문적으로 배울 수 있을까요? UX 관련 온오프라인 강좌 및 스터디 그리고 블로그를 소개합니다. T아카데미 과정 - 모바일UI/UX기획 / 무료 오프라인 강의모바일 UI/UX 의 개념 및 사용자 특성에 대한 이해와 디자인 원칙, 그리고 UX/UI 기획/설계에 필요한 디자인 방법 및 프로세스에 대한 학습과 실습을 통해 모바일 단말 및 서비스 UI를 디자인할 수..
모바일 사용자 UX의 시작, 터치 제스처 IT 기술이 발전함에 따라 우리가 사용하는 인터페이스(Interface)는 여러 차례 발전을 거듭해왔습니다. PC의 등장으로 키보드나 마우스와 같은 입력장치를 활용하여 사용할 수 있었다면, 현재는 터치 스크린을 기반으로 하는 스마트폰의 대중화로 인해 터치 제스처 인터페이스가 자리 잡게 되었습니다. 우리는 스마트폰 화면에서 손가락 하나로 많은 것을 실행하고, 또 경험하고 있습니다. 여러분은 사진을 확대해서 볼 때 자연스럽게 취하는 그 행동의 이름을 아시나요? 오늘은 터치스크린을 기반으로 하는 인터렉션의 중요성과 터치 제스처 인터페이스의 종류를 몇 가지 소개합니다. 본문에 들어가기에 앞서 간략하게 터치와 제스처에 대하여 정의할 필요가 있습니다. 터치(Touch)손가락이 화면 위에 올려진 상태를 말합니다. 예..
좋은 인터랙션 디자인을 위한 5가지 심리학 비밀 인간적인 요소를 포함하는 디자인은 매일 더욱 중요해지고 있습니다. 웹사이트와 사용자 경험 디자인은 미학에서부터 인터랙션, 모션(인식과 실제), 감정적 연결까지 사실적이어야 합니다. 그러나 디자이너들이 가장 자주 직면하는 문제는, 사용자를 `실제 사람들`처럼 생각하지 않는다는 것입니다. 인간적인 디자인은 사용자에게 물리적, 감정적으로 이어질 수 있는 매력적인 경험을 만들어줍니다. 인간적인 디자인을 위해서는 무엇을 고려해야 할까요? The Next Web(TNW)에 소개된 UXPin의 사례를 소개합니다. 1. ‘사람이 가장 먼저’모든 프로젝트의 디자인과 기획 단계에 이 말을 기억하세요. 의도적으로 행동하고 인터랙션하고, 디자인하세요. 무엇보다 사용자에게 공감하는 것이 중요합니다. 사진 제공: 리복 사람을 위..
[웹 활용팁] 버튼색상에도 정답이 있다. 웹 페이지에서 "회원에게만 공개되는 내용입니다. 로그인 해주세요." 라는 창이 뜬 경험은 한번 쯤 있을 텐데요. 그럴 때 뜨는 창을 "모달윈도우(Modal Window)"라 부릅니다. 즉, 모달 창은 일반적으로 사용자의 명령을 인식하기 위해서나, 긴급 상황을 알리기 위해 많이 사용됩니다. 이 기능 사용자가 진행하던 작업의 흐름을 흐트러트리기에 버튼 기능은 더욱 중요합니다. 버튼은 3가지 성격으로 나뉩니다. 1. positive : 화면의 변화를 주거나 정보를 추가하는 버튼 (전송하기, 더보기) 2. Neutral: 화면의 변화가 없는 버튼, 화면으로 되돌아가는 버튼 (예를 들면 "취소하기"버튼을 말합니다.)3. Negative: 삭제, 리셋, 추가정보를 차단하는 버튼그럼 3가지의 버튼마다 컬러는 어떻게 ..
보기 좋은 약관이 읽기도 좋다. 회원 가입을 하려면 꼭 만나게 되는 약관, 모든 내용을 자세히 읽어본 적이 있으신가요? 아마 많지 않을 것입니다. 대부분의 약관이 읽기조차 힘든 형태이기 때문이죠. 그러다보니 대부분 회원 가입할 때 약관을 제대로 확인하지 않게 됩니다. 사용자가 약관을 제대로 확인하지 않으니, 약관의 가독성을 소흘히 하는 것은 자연스러운 현상일지도 모릅니다. 하지만 서비스 제공자에게는 약관을 제대로 전달할 의무가 있습니다. 도대체 무슨 말인지 이해하기 어려운 약관을 보여줘놓고, 사용자에게 읽고 동의하고 책임지라고 할 수만은 없는 노릇이죠. 안그래도 어려운 약관, 어떻게 하면 이해하기 쉽게 전달할 수 있을까요? 인포그래픽 활용하기 시각적인 요소를 활용하면 메시지를 훨씬 더 효과적으로 전달할 수 있습니다. 더군다나 그 메시지..
홈페이지 방문자 수를 늘리기 위한 7가지 팁 이 글은 디자인 에이전시 Digital Telepathy의 "7 Signs Your Website Design Is Bad for Business" 글을 "홈페이지 방문자 수를 늘리기 위한 7가지 팁"이라는 제목으로 번역하고 일부 수정하여 작성하였습니다. 하루에도 수십 개의 홈페이지가 개발됩니다. 살펴보면 비슷한 형태와 구성의 웹사이트들을 많이 볼 수 있습니다. 왜 그럴까요? 각 회사의 특징이 다를 텐데 말이죠. 다양한 프로젝트를 진행하면서 접하는 여러 클라이언트의 요구는 이렇습니다. 다양한 콘텐츠를 웹사이트 메인에 모두 드러내 주세요. 그렇다면 그 콘텐츠를 방문자가 다 읽어보고 클릭할까요? "(사용자를) 생각하게 하지마!" 도서에는 이런 내용이 있습니다. 제작자는 사이트가 "훌륭한 작품"이 되기를, 아..
웹사이트 메뉴 현명하게 사용하기. 세로형 내비게이션 세로형 내비게이션이란? 웹사이트의 콘텐츠 항목을 볼 수 있는 메뉴 내비게이션은 일반적으로 가로형과 세로형이 있습니다. 현재 슬로워크의 내비게이션은 상단에 가로로 보이는 가로형 내비게이션입니다. 흔히 접할 수 있는 방식이죠. 그럼 세로형 내비게이션은 무엇일까요. 세로형은 브라우저 영역을 기준으로 왼쪽 위 기업 로고 아래 수직 배열로 정렬되는 구조를 말합니다. 일반적으로 가로형 내비게이션이 많이 쓰이지만, 스크롤로 제어하는 원 페이지 구조가 등장하면서부터 이에 적합한 세로형도 많이 볼 수 있게 되었습니다. 세로형 내비게이션 메뉴 활용법 1. 단일 페이지 레이아웃을 활용하여 상하로 동작하도록 만들어주세요.단일페이지란 반응형 웹에 따라 사용되는 구조인데요. "One page", "Full page" 라고 불리며..

티스토리툴바