실습 7일차!
오늘은 교육 끝나자마자 과외 갔다오느라 가볍게 수업 내용 정리랑 실습 진도 정도만 기록한다.
훠훠훠 내일 다시 오프라인 교육...
일단 교육 내용 정리!
Week 2-2(11/7) : 디자인원칙과 UX라이팅
1. UX를 향상시키는 디자인원칙
UI 핵심 요소(사용성, 편의성, 직관성, 조작성)
* 사용성
: 직접 사용하고 느낀 사용자 경험. 사용할 때 특정한 맥락의 사용에서 효과성, 효율성, 만족도에 관한 것
배우기 쉽고, 사용하기 쉬워야함
특정 목적을 달성하는데 실수 가능성이 적어야함
인터페이스 사용자의 만족감 및 성취감이 높아야함
어포던스
: 형태나 디자인을 통한 행위자의 행동 유도한다는 개념. 행위자와 환경 간의 관계, 행위자와 환경 관계 속에 존재하는 행위의 가능성
=> 행동 가능성(affordance)
일상에서의 어포던스 디자인
일반의자 vs 애기의자 => 일반 성인에게 전자는 ‘앉을 수 있음’이라는 어포던스가 존재하고 후자는 어포던스가 존재하지 않는다.
미닫이문에 붙어있는 ‘미시오’, ‘당기시오’ 표시가 없으면 그 문은 어포던스가 부족한 것!
줄이 달린 CD 플레이어/줄 달린 벽걸이 선풍기 => 줄을 당기면 재생된다는 걸 알고 있음(어포던스 o)
디지털 화면에서의 어포던스 디자인 : 지각된 어포던스
‘눌러서 작동시킬 수 있음’ = 버튼의 어포던스
-> 눌릴 수 있을 것 같은 시각적 표현(버튼의 그림자 표현, 빛 효과, 테두리, 배경과의 분리 등) = 지각된 어포던스
사용성을 높이는 UXUI원칙
1) 가시성
사용자가 취할 수 있는 행동과 기능이 잘 보이게 한다.
ex) 아이폰의 전화 수신 화면(밀어서 수신, 통화 거절/수신), 구글의 홈화면(메뉴별 토글)
시각적 여백을 통해 심미성과 컨텐츠의 정보 전달력을 높인다.
ex) 그룹핑 간 여백 설정하기
컨텐츠, 비쥬얼의 강약으로 리듬감과 주요 컨텐츠에 집중을 유도한다
ex) 주제 및 타이틀 텍스트는 과감하게 폰트를 키우고 강조해야한다
2) 집중
각 화면에서 주요 기능에 대한 한 가지 행동에만 집중하게 한다.
ex) 인스타그램의 사진 업로드하기, 스타벅스의 음료 주문 과정
3) 반응
사용자 행동에 대해 즉각적으로 시각적 반응을 보여준다.
ex) 번호나 버튼을 눌렀을 때 그 부분이 표시되는 인터렉션
사용자 행동에 대한 실시간 진행 과정 및 결과를 보여준다.
ex) 온라인쇼핑의 주문완료-배송중-배송완료 등의 과정 표기 / 따릉이의 남은 시간 표시 링
실수에 즉시 대응한다
ex) 사용자가 이메일이나 아이디를 잘못 입력했을 때 즉시 알려주기 ‘잘못된 이메일 형식입니다. 다시 입력해주세요’와 같은 토스트 팝업
4) 제약
사용자가 적절한 행동을 취하도록 범위를 제한한다.
ex) 카카오톡에서 텍스트를 작성하기 전엔 ‘보내기’ 버튼이 없었지만, 입력 후 보내기 버튼이 등장해 사용자의 행동을 유도 or 아이디/비밀번호를 입력하고 나야 강조되는 ‘로그인’ 버튼
5) 맥락
자연스러운 흐름을 따라 행동하게 함
6) 일관성
브랜드 인지를 위한 시각적 통일성(디자인요소)를 느끼게 한다.
UI패턴은 통일해 사용자의 학습을 방해하지 않는다.
7) 움직임
의도된 움직임을 통해 집중과 시각적 즐거움을 만든다
8) 예측가능
화면에서 사용자가 취해야하는는 행동을 예측할 수 있어야한다.
2. UX 라이팅
: 사용자가 앱을 효율적으로 사용하고 탐색하는데 도움을 주는 글쓰기 과정이며 제품과 상호작용하는 방식을 결정하는 중요한 요소 -> 사용자 경험을 설계하고 긍정적 감정을 남김
UX라이팅이란?
사용자에게 좋은 감정을 만들어주는 7가지 UX라이팅 원칙
Perfect 모델
P: Precise word
사용자가 행동해야하는 것과 가장 정확한 단어를 사용
E: Easy expression
일반적인 대상의 문해력을 고려해 일반적이고 쉬운 단어를 사용
R: Response
사용자가 단어와 상호작용하는 것을 인식하고 작업해야한다.
F: Feedback
사용자 인터뷰, 설문을 통해 피드백을 활용해라
E: Effect
가장 효과적인 문장을 사용해 사용성을 높여라(관용어, 비유표현 사용 주의)
C: Consistency
일관된 보이스톤, 단어의 사용으로 사용자에게 혼란을 방지(문장 어미 통일하기)
T: Test
사용성 평가, A/B테스트, 휴리스틱 평가, 체류 시간 등의 데이터를 활용해 시험해라
효과적인 UX라이팅 작업을 위한 편집 4단계
step 1 : 목적성
사용자와 기업의 목적을 만족시켜야 함
어떤 경험이 사용자에게 어떤 역할을 하는지 생각해보기
일단 목적을 고려해 다양한 문구를 작성해보기
step 2 : 간결성
사용자는 40자 미만 텍스트가 3행 이하일 때 읽기 쉽다 -> 텍스트는 간단하게!
문구들을 최대한 간결하게 수정
step 3 : 대화성
사용자와 단어와의 상호작용이 중요
구어적 텍스트를 만드는 단계 => 소리내어 읽어보면서 수정
step 4 : 명료성
목적 되새기기 => 생각할 필요 없이 즉각 이해할 수 있는 표현
사례
토스의 사용자 입장 말하기 ex. ‘내 통장으로 10원을 보냈어요‘, ~할까요?’
기능설명으로 사용성 높이기 ex. 배민의 포장, B마트, 쇼핑라이브 하단에 기능 설명
but 지나친 친절은 중의적 의미로 받아들여질 수도 있음
=> 오늘 교육 내용은 많지는 않았지만 작업 중인 일레클 리뉴얼 프로젝트의 본격적인 디자인 작업에 들어가기 전에 다시 한번 확인할 부분을 알려주는 체크리스트 같았다. 처음부터 끝까지 요소별로 다시 한번 확인해봐야할 듯.
실습 Day 7(11/7)
와이어플로우&와이어프레임
오늘은 어제 UI스케치를 통해 제작한 와이어프레임 초안을 조금 더 구체화해봤다.
스케치한 내용을 피그마 툴을 통해 실제 디바이스 사이즈에 맞춰 프레임별로 제작했다.
일단 오늘의 실습 과제는
1. 와이어플로우 제작
2. 와이어프레임 제작
사실 어제 못다한 스케치를 추가하느라 와이어프레임 구체화는 작업은 많이 진행하지 못했다.
대여 메뉴에서 주행 중 화면, 반납 화면이 빠져서 추가했고 리워드 지급화면도 조금 더 구체화했다.
사실 여기서 기기정보에 일레클패스 구매 시 할인되는 금액 표기 기능을 포기했다.
일레클패스는 패스 유형에 따라 개별 대여 시 할인율 편차가 크기도 하고, 시간 패스를 구매하면
해당 시간 동안은 아예 무료라 최대할인금액을 표기하는 방식이 사실상 불가능하다.
매일 작업 후에 이제 더이상 수정할 부분이 없다고 생각하는데 다음날 작업을 진행하다보면
매번 수정할 점이 보인다. 아직 많이 부족해서 그런거겠지. 그래도 혼자서 할땐 뭐가 잘못된 지도 모를텐데
오히려 이게 훨씬 낫다.
사실 오늘은 UI스케치 추가와 기능 수정에 시간을 워낙 많이 써서 와이어프레임 제작은 그렇게
많이 진행하지 못했다. 이제 대여하기 메뉴 하나 끝..! 와이어플로우도 내일 추가해야할 듯.
일단 오늘은 너무 피곤하기도 하고 내일 또 일찍 나가야하니 여기까지...
본 후기는 유데미-스나이퍼팩토리 UI/UX 디자이너 인턴형 프로그램 학습 일지 후기로 작성 되었습니다.