brunch

라이킷 136 댓글 13

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by maus x maus Jul 21. 2016

채팅 UI 개선하기

터치 인터페이스를 더 좋게 디자인하기

친구들에 문자를 보내면서 저는 만약 앱에서 좀 더 인지하게 쉽게(affordance) 개선한다던가 상태 이해하기 쉬운 알림(cue)이 있다면 더 좋을 거 같다고 종종 생각하곤 합니다.

*어포던스: 형태를 보고 어떻게 사용하는지 바로 인지할 수 있는.

*큐(cue): 신호/알림

그래서 앱에서 그러한 기능이 추가된다면 얼마나 개선할 수 있을지 생각해 보았습니다.

이것은 저희가 어떻게 채팅 경험을 개선할수있는지 생각을 키우고 하도록 과거 그리고 현재 사용되는 채팅 앱 인터페이스를 심도깊게 연구를 하도록 자극했습니다.

본 포스트는 저희가 컨셉추얼 앱에 디자인 언어를 통합하기 위해 노력하는 저희의 희망 사항을 담은 연구입니다. 또한 본 포스트는 소주제를 포함하고 있고 소주제는 아래와 같습니다.

개요(Rationale)

해결책이 필요한 문제가 무엇인지 설명하고 그 문제를 어떻게 접근했는지에 대한 개요입니다.

비주얼 디자인
저희는 우리가 다른 선택들을 반대로하고 왜 (디자인을) 선택했는지 가벼운 토론으로 UI에서 비주얼 디자인이 왜 그렇게 되어야 하는지 이야기합니다.

적용된 디자인(Design in Action)

모든 것이 어떻게 맞물리고(fits together) 문제 해결을 위해 어떻게 작동하는지 확인합니다.

홈스크린

비주얼 디자인

우리는 최종 인터페이스에 어울리는 스타일을 여러 번 많이 반복했습니다. 그리고 그 결과는 아래와 같습니다.

채팅 말풍선

개요

상대가 전송한 메시지를 읽은 경우 요즘 나온 앱은 사용자에게 알려줍니다. 이러한 방법은 앱에서 조그만 체크표시로 제한적으로 표시해주는데 신규 사용자가 인지하기는 어렵습니다. 제 개인적인 경험을 얘기하자면 저희 어머니가 얼마 전부터 채팅앱을 사용하기 시작했는데 저희 어머니는 메시지를 보낼 때마다 메시지가 정상적으로 전송되었는지 물어보셨습니다. 적어도 저희 어머니한테는 조그만 체크 아이콘이 파란색으로 변하는(전송완료)것을 보고 인지하기 어려웠습니다. 그래서 어머니는 안경을 끼고 전송이 정상적으로 되었는지 확인하게 되었습니다.

비주얼 디자인

그래서 저희는 상대방이 글을 읽으면 채팅 말풍선을 흐릿하게(paler) 보이게 함으로 전송된 메시지를 읽음/안 읽음으로 명확하게 구분으로 짓기로 했습니다. 또한 말풍선 옆에 눈 심벌을 같이 배치해서 사용자가 메시지 읽음 확인을 개선했습니다. 아래 이미지는 말풍선 변화를 순서에 맞게 구성해 보았습니다.

적용된 디자인

조그만 디테일로서 저는 깜박거리는 눈을 넣어보았는데 이것은 그룹 채팅에서 다른 대화 상대가 현재 채팅방의 글을 읽고 있음을 의미합니다. 만약 눈이 깜박거리는 것을 멈추면 그 뜻은 다른 대화 상대가 채팅방을 나가서 나중에 회신할 수 있다는 것을 의미합니다.

알림 창/팝업

개요

채팅 중 다른 사람한테 "응, 그래, 알았어, 좋아" 같은 단문 회신을 요구하는 메시지가 종종 오곤 합니다.

요즘 채팅 앱에서는 신규 메시지 알림이 오는 경우 해당 화면으로 이동해서 회신을 하게 끔 되어 있는데 이렇게 하기 위해 사용자에게 메시지 알림을 탭 하도록 요구합니다. 경험해봐서 아시겠지만 여러 명한테 동시에 메시지가 와서 답장하느라 여러여러 채팅 화면을 계속 들어갔다 나왔다 하는 것은 사용자를 피곤하게 만듭니다.

회신을 하기 위해 다른 채팅 화면으로 가서 메시지를 보내는 것은 결국 대화의 흐름을 방해합니다.

그래서 저희는 디자인이 콘텍스트 전환(다른 채팅 화면으로 이동)을 최소화하기 위해 노력했습니다.

적용된 디자인

메시지 알림 팝업이 하단에 조그만 화살표 표시하여 화살표를 아래로 내릴 수 있게끔 했습니다.

그리고 아래로 내리면(스와이핑) 신규 채팅 메시지가 모두 보이게 했고 바로 답장할 수 있게 구현해서 대화 중 화면을 답장하기 위해 현재 대화창을 벗어나지 않도록 했습니다.

메시징 인디케이터

*인디케이터: (비주얼 기법)을 통해 상태를 알려주는 것. 예) 모바일 상단에 고정된 배터리, 신호감도 표시등.

개요

채팅 중 상대가 메시지를 뭔가를 보내려는 경우 화면에서 인디케이터가 깜박거리는 것입니다.

이것은 보통 스피너(빙글빙글 도는 거)나 동그라미가 한 줄로 이동하면서 깜박거리는(*페이스북 메신저 참조) 추상적(abstract)인 단순한 애니메이션으로 구현됩니다. 그런데 저희는 디자인 리서치에서 인디케이터는 이전보다 친화력(표현력)을 높여야 한다는 아이디어를 발견했습니다. 그래서 저희는 상대방으로부터 어떠한 행위(글 보내기, 사진 전송, 음성)를 표현하는 것을 메타포를 만들었습니다.

비주얼 디자인

저희는 어떠한 경우에도 자연스러운 흐름을 경험하기 위해 끊김 없는(indefinitely loop) 아이콘을 만들었습니다. 아래는 각 상황에 맞는 아이콘들입니다.