uxui

TIL (Today I learned)  오늘 나는 무엇을 했나요- 카타 ( Mobile only 컴포넌트  )- 개인과제  ( 사용성 테스트 ) 오늘은 어떤 것을 배웠나요1.카타 (모바일 컴포넌트)오늘은 각 카타조원들이 조사한것을 발표하였다. 탭, 로딩인디케이터을 발표를 하였는데 그중 로딩인디케이터에서 배운점이 있었다. 먼저 로딩 인디케이터는 사용자가 시스템의 작업 상태를 이해하고 기다리는 동안 불편함을 최소화 하도록 돕는 UI이다. 로딩인디케이터에서는 각 종류가 많았는데 그중 스켈레톤같은경우는 모바일은 빈공간이 많아 활성화된 경우라고 한다.그외에는 우리가 자주 보는 스피너 형식, 프로그레스바 형식,애니메이션일러스트등이있다.  다음 로딩인디케이터는 안보여주는게 최선이지만 기술적으로 어쩔수없을때 보여주는..

TIL (Today I learned)  오늘 나는 무엇을 했나요 - 카타 ( Mobile only 컴포넌트  )- 개인과제  ( 사용성 테스트 ) 오늘은 어떤 것을 배웠나요1.카타 (모바일 컴포넌트)오늘은 저번에 이어서 캐러셀UI에 대해 리서치를 마저 진행하였다. 저번에 대부분 다 끝내서 이번에는 캐러셀의 PC와 모바일의 차이점을 조사를 하였다. 먼저 차이점은 크게 3가지로 나눴다. 1. 디스플레이 크기와 레이아웃2.인터랙션 방식3.콘텐츠 크기와 정보량   디스플레이 크기와 레이아웃 PC (네이버스토어예시)1.네이버스토어를 예시로 보면 가로 폭이 넓어 한 화면에 여러 개의 콘텐츠를 표시하고있음2.아래처럼 보통 한 번에 3~5개의 슬라이드를 보여줌 모바일 ( 네이버스토어예시)1.화면이 좁아 한 번에 1~..

TIL (Today I learned)  오늘 나는 무엇을 했나요 - 카타 ( Mobile only 컴포넌트  )- 개인과제  ( 사용성 테스트 ) 오늘은 어떤 것을 배웠나요1.카타 (모바일 컴포넌트)오늘은 카타가 다시 시작하였다.저번에는 UI컴포넌트를 하였다면 이번에는 모바일 컴포넌트에 대해 리서치및 조사를 진행하였다.터치 제스처로딩 인디케이터리스트/카드캐러셀푸시/알림이렇게 총 5개중 나는 캐러셀 리서치를 맡았다. 리서치를 한것을 요약하면  정의와 목적이름: 캐러셀(Carousel), 슬라이더(Slider), 갤러리(Gallery)역할: 공간을 효율적으로 사용해 여러 콘텐츠를 표시하며, 사용자가 스크롤을 통해 쉽게 탐색할 수 있도록 돕습니다. iOS에서는 페이지 컨트롤, Android에서는 뷰페이저나 ..

TIL (Today I learned)  오늘 나는 무엇을 했나요 - 카타 (UI 컴포넌트)- UX 기획 및 리서치 강의 오늘은 어떤 것을 배웠나요1.카타 (UI 컴포넌트)오늘은 각각 리서치해온 컴포넌트들을 발표하는 시간을 가졌다.그중 버튼 컴포넌트 리서치 발표를 들었다. 버튼의 정의와 목적및 종류들과 Do&Don't 를 발표를 한것을 주의깊게 들었다. 그중 이번에 알게된거랑 애매한게 알고있었지만 이번에 이유를 알게된것도 적어보았다.   고스트 버튼을 CTA로 잘 사용하지는 않지만 만약 사용을 하게 된다면 사용자들이 이것이 버튼이라는것을 인지할수도있도록 배치를 해야한다   메인로고와 CTA 버튼이 같은모양을 하고있다면 사용자에게 이게 둘다 버튼인지 아닌지 혼란을 줄수있다.   프라이머리보다 버튼이 잘 보..

TIL (Today I learned)  오늘 나는 무엇을 했나요 - 카타 (UI 컴포넌트)- UX 기획 및 리서치 강의 오늘은 어떤 것을 배웠나요1.카타 (UI 컴포넌트)오늘은 각 상황 Do&Don't 를 정리하고 그동안 리서치한 카타자료들을 정리를 하면서 발표할 대본을 작성하였다.  먼저 라벨을 적을때 적절한 대소문자 사용유무에 대한 Do&Don't이다 Do의 이유로는 소문자와 대문자를 같이 활용하여 상대적으로 가독성이 높아진다Don't의 문제점으로는 대문자만 사용을 하여 가독성이 떨어지고, 디자인의 일관성이 부족하다 그리고 breland & breland의 글을 참고했는데 텍스트를 모두 대문자로 설정하면 읽기 속도가 약 13 ~ 20% 느려진다는것을 알수 있었다!    그다음 입력을 받는 텍스트 필..

TIL (Today I learned)  오늘 나는 무엇을 했나요 - 카타 (UI 컴포넌트)- UX 기획 및 리서치 강의 오늘은 어떤 것을 배웠나요1.카타 (UI 컴포넌트)오늘 카타중 리서치를 통해 구글 검색바가 라벨이 없는이유와  왼쪽 정렬 라벨을 사용하는 이유 등 여러가지를알았다.  입력필드는 사용자가 UI에 텍스트를 입력할 수 있는 컴포넌트이다.입력필드에는 대부분 활용하는 표준텍스트 필드 와 Filled text field(채워진 텍스트 필드)와 Outlined text field(윤곽이 그려진 텍스트 필드)가 있다.텍스트 필드는 일반적으로 양식과 대화 상자에 나타납니다.텍스트 필드의 다양한 상태변화는 사용자가 한눈에 볼 수 있어야 합니다.   여기서 Filled text field(채워진 텍스트 ..

TIL (Today I learned)  오늘 나는 무엇을 했나요 - 카타 (UI 컴포넌트)- UX 기획 및 리서치 강의 - 팀프로젝트 피드백 디벨롭 정리 - 개인과제 피드백 디벨롭 정리  오늘은 어떤 것을 배웠나요1.카타 (UI 컴포넌트)오늘 새로운 카타를 시작하였다.UI 컴포넌트가 무엇인지 왜 사용하는지 어떤것이 있는지를 리서치 및 분석하는 카타이다.나는 UI 컴포넌트중 입력필드의 리서치를 맡았다. 입력필드는 그냥 말그대로 사용자가 UI에 텍스트를 입력 할 수 있는 UI이다. 실무 또는 실제 서비스에서 사용되는것들로는 조사한바로는 로그인&비밀번호 필드, 이메일필드, 전화번호 필드, 검색필드, 주소창필드, 신고필드, 요청사항 필드, 쿠폰번호 필드, 회원가입 필드, 송금금액필드,프로필수정필드 등 다양했다..

프로덕트 디자이너 본캠프 WIL 3주차 - FACTS(사실, 객관) :이번 일주일 동안 있었던 일, 내가 한 일 -팀프로젝트-우리동네GS앱 UI 개선 - FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌이번 프로젝트는 힘들었지만 힘든만큼 내가 배운것이 많아서 뿌듯했다.그리고 프로젝트가 끝나고 다음 프로젝트로 넘어가게 되며 팀원들과 헤어지게되어 슬펐다. - FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것월요일 팀프로젝트UI개선의 첫단추를 맺는 방법을 배웠다. 가장 중요한 타겟선정과 핵심기능과 그 문제점이다.핵심기능이 중요한 이유와 불편한 이유를 앞에 타겟 즉 사용자의 니즈와 연결지어서 풀어야하는것을 배움 화요일 팀프로젝트튜터님이나 과정을 전반적으로 알고있는분들(현업에서는 ..

TIL (Today I learned)  오늘 나는 무엇을 했나요 - 팀 프로젝트 ( 우리동네 GS UI 개선) 오늘은 어떤 것을 배웠나요1.팀 프로젝트 오늘은 피드백을 받고 작은 UI개선과 워딩부분을 개선하였다. 먼저 오전에 개선할 페이지에서 사용할 마스터 컴포넌트를 제작한다음 인스턴스 컴포넌트로 페이지를 제작하였다.이때 한 컴포넌트안에 불리언을 적용한 아이콘을 2개 이상 제어를 할때 네스티드 컴포넌트를 이용하여 제작하였다. (네스티드로 안하면 한번에 제어 못하는것 같음) 그다음 마스터 컴포넌트중에 말풍선 컴포넌트가 필요하여 제작을 하려했는데 쉽지않아서 인터넷의 도움을 받았다. 피그마 말풍선 컴포넌트 만들기안녕하세요 찐망고입니다.오늘은 피그마를 이용하여 말풍선 컴포넌트를 만들어 볼 건데요.하나 만들어 ..

TIL (Today I learned)  오늘 나는 무엇을 했나요 - 팀 프로젝트 ( 우리동네 GS UI 개선) 오늘은 어떤 것을 배웠나요1.팀 프로젝트 오늘은 어제 한 개선을 전부 갈아엎었다. 오늘은 와이어프레임을 만든후 UI개선과 플로우개선을 하였다 여기부터 방향이 틀렸었다.그후 이 개선이 UI개선인지 UX개선인지 튜터님에게 찾아가 질문리스트를 작성을 한후 질문을 하였다. 먼저 우리가 한 플로우개선은 UX개선으로 볼 수 있었다. 이 화면을 없애 불필요한 경로를 없애 문제를 해결할수있지만솔루션은 만들기 마련이고 범위가 크면은 실무에서는 그만큼 리소스를 많이 써야하므로, 우리는 한 화면에서 UI만을 개선하여 최소한의 리소스를 사용하는 방법을 고민하는게 좋다고 하셨다. 그후 우리팀은 회의를 들어갔다.기존 ..