27일부터 실제 배포가 진행되고,
인스타 그램에 광고마케팅과 개발자 커뮤니티 등에 마케팅을 시작했다! 🔥🔥🔥
더 좋은 서비스를 위한 사용성 테스트(UT)를 진행하고자, 유저 피드백 이벤트를 곁들였다 😀
그 결과 설문조사를 통해 40여건이 넘는 피드백이 들어왔고, UI에 대한 피드백뿐 아니라
우리가 미처 발견하지 못한 오류또한 제보되었다 😱
오늘은 개발에 있어 중요한 사용성 테스트에대해 알아보고,
우리팀이 개선한 피드백들을 정리해보려고 한다!
사용성 테스트(UT)
UT는 Usability Test 의 약어로, 사용성 테스트라고도 부른다.
UT는 잠재 사용자들에게 테스트를 진행하여 제품을 평가하는 방법 중 하나다. 웹이나 앱이 사용하기에 충분한지, 개발자의 의도대로 사용되는지 확인하면서 제품의 사용성을 테스트 해볼 수 있다.
UT는 왜 필요할까?
매일 애플리케이션을 보며 개발을 하는 개발자는 항상 보던 관점대로 서비스를 볼 수밖에 없다. 어디에 어떤 기능이 있고, 이걸 누르면 어떻게 되고...
하지만 사용자는 개발자가 아니다.
서비스의 모든 부분이 낯선 실제 사용자에게 애플리케이션의 모든 부분은 당연하지가 않다.
그런 사용자의 관점에서 우리 애플리케이션을 바라봐야지만, 우리의 서비스가 사용성이 좋은지 아닌지 비로소 알수가 있는것이다. 또한, 우리가 미처발견하지 못한 오류도 발견할 수 있다.
더 나아가, 사용자의 니즈를 파악할 수 있다는 장점도 있다.
유저가 우리 애플리케이션을 사용하면서 원했던 목적..
아무리 좋은 서비스를 만들었다고 하더라도, 해당 서비스를 직접 사용하는 사용자들이 앱을 사용할 줄 모른다면, 그들에게 어떠한 가치도 제공해줄 수 없다.
개발자가 의도한 UI, 인터페이스라도 실 사용자의 관점에서 불편함을 느낀다면 그 의도는 무의미해진다.
그렇기 때문에 UT를 적절히 진행하여 사용자들이 느끼는 제품의 사용성을 확인하고, 개선해나가는 작업이 필요하다.
피드백 개선
설문조사 이벤트를 통해 40여건이 넘는 피드백을 접수했다!
그 중 유저의 불편함을 최대한 빠르게 잡을 수 잇는 피드백과,
본 서비스를 이용하면서 큰 문제가 발생할 수있는 피드백을 우선순위로 잡아 개선해나가기로 결정!
[사용성 개선]
보여줄 데이터가 없을 경우 빈 화면이라 사용자가 오류라 생각
🥲 나의 피드 모아보기에서 아무런 정보가 없으면 터지는거같아용
🥲 나의 피드 모아보기 누르면 아무것도 안뜨는 게 아쉬웠어요
🥲 주변 산길에서 아무런 화면이 뜨지 않습니다
주변산길같은 경우는 우리가 5km 이내에 있는 데이터를 기준으로 하기때문에,
5km 내에 산이 없으면 데이터를 안보여주게 되는 상황이었다.
주변산길 말고도, 내가 등록한 피드가 없거나, 모임 일정이 없는 경우 등등 컨텐츠가 없을때 별다른 처리를 하지 않았었는데
이게 사용자 입장에선 허전함을 느낄 수도 있고, 때로는 오류라 느껴질 수도 있다는 것을 알게됐다!
보여줄 데이터가 없을때, 이를 알려주는 UI를 추가했다
산포스트 클릭영역 불편
🥲 이미지 말고 텍스트를 클릭해야 정보를 확인할 수 있어 불편해요ㅜㅠ 개인적으로 클릭 영역이 넓으면 더 좋을 것 같습니다!@!
기존엔 산의 세부페이지로 넘어가는 클릭영역이 텍스트 부분이었는데,
이게 불편하다는 의견이 있어 영역을 확대했다.
이때, 문제가 발생했는데
산 카드 안의 북마크 버튼을 눌렀을 때, 이벤트 버블링으로인해 북마크 기능이 실행되지 않고,
상위 컴포넌트의 이벤트인 산 상세 페이지로 넘어가는 기능이 실행되는 문제였따! 🥲
이를 해결하기 위해서!
현재 이벤트가 버블링 단계에서 더 이상 전파되지 않도록 방지해주는 event.stopPropagation()을 사용해서 해당 이벤트가 전파되는 것을 막을 수 있었다.
// 북마크 Icon
<Icon
type="like"
width="18px"
height="18px"
margin="0 0 -103px 163px"
fill={el.bookmark ? "#43ca3b" : "#c4c4c4"}
_onClick={(e) => {
e.stopPropagation();
bookmark(el.mountainId, "around");
}}
/>정보 부족
🥲 산에대한 정보가 부족해요!!
원래는 산이름, 주소, 코스정보, 사용자들의 피드백 정도만 제공됐는데
공공api에서 받아오는 데이터에 산의 설명, 높이데이터가 있어 해당내용을 추가했다.
한눈에 들어오지 않는 UI
🥲 등산모임 게시글 수정할때 산도 변경할 수 있는지 알았는데 클릭해보고 안눌려서 변경안되는걸 알았어요!
🥲 의도하신지는 모르겠으나 모집이 마감된 경우에는 회색으로 보여주시지만 기간이 마감된 경우에서는 UI가 초록색이여서 조금은 헷갈렸습니다.
친절하지 않은 UI 문제로 접수된 불편사항이었다.
우선 모임게시물을 수정하는 페이지의 경우,
모임 수정시 산과 제목은 수정할 수 없게 고정된 값이었는데 메뉴타이틀 텍스트의 색깔을 회색으로 해서 변경할 수 없다는 것을 알렸었다.
하지만 그 우리나름의 의도가 사용자의 입장에선 부족했고, 더 확실히 알려줄 수 있는 방법이 필요했다.
그래서 잠금아이콘으로 해당 메뉴가 고정됐다는 것을 알려주는 방식으로 수정했다!!
모임리스트를 보여줄 때의 경우 생각하지 못햇던 문제로 사용자들이 불편함을 겪었다ㅠㅜ
마감된 모임의 경우를 인원수가 다 찼을때를 기준으로 밖에 생각을 못해서, 기간이 지났을 경우를 캐치하지 못했었다.
그래서 기간이 지난 경우는 마감이 됐다는 포스트의 스타일과 다르게 보여지고 있었다.
바로 스타일 수정을 했고,
기간이 지나 마감된 모임과 인원수가 완료돼서 마감된 모임에도 약간의 스타일 차이를 줬다.
[오류 해결]
검색창 특정 특수문자 입력 오류
🥲 검색오류있습니다 (ex. [, % &)
검색창에서 특수문자 등의 예외처리를 미처 못했었는데, 바로 추가했다.
Input 엘리먼트에 onChange 이벤트를 추가해서 유저가 특수문자를 입력하면 감지해서 바로 경고모달이 뜰수 있도록!!
// CheckSpecial.js
const CheckSpecial = (str) => {
const regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\-_+┼<>@\#$%&\'\"\\\(\=]/gi;
return regExp.test(str);
};
export default CheckSpecial;
// SearchModal.js
import { CheckSpecial } from "../components/component";
...
...
const onChange = (e) => {
if (CheckSpecial(e.target.value)) {
setModalContent("특수문자는 입력할 수 없습니다");
setModalOpen(true);
return;
}
setSearchKeyword(e.target.value);
};
이미지파일 확장자 문제
🥲 피드 작성할때 사진이 아닌 pdf 확장자 파일도 올라갑니다!
이것도 위와 비슷하게 예외처리 문젠데,
이미지를 등록할때 이미지 파일말고도 다른 확장자의 파일도 올라간다는 피드백이었다.
input에 accept 속성을 줘서 유저가 이미지 형식으 파일만 고를 수 있도록 수정했고, 2차적으로 확장자가 이미지형식이 아닌 파일은 올리지 못하도록 수정했다.
state 관리 문제
[좋아요]
🥲 게시글 하트 누르고 뒤로가니까 숫자가 줄어들었고 마이너스가 되었어요.
🥲 피드페이지에서 댓글 더보기 누르고 좋아요 누른 뒤 뒤로가기 버튼을 클릭하면, 좋아요 개수가 안올라가있습니다~!
[검색데이터]
🥲 검색페이지에서 검색 마커들이 페이지를 넘길때마다 증식돼요!!
redux에서 state 관리를 할 때 잘못된 코드로 인해 오류가 발생했었다.
두 상황 모두 데이터 관리에 대한 코드를 수정해서 해결!
좋아요의 경우는 서버에서 주는 데이터만 보여주는 것으로 해결했고,
검색페이지 마커들의 경우는 페이지가 변경될 때마다 받아온 데이터를 새롭게 보여줬어야 했는데,
아무생각없이 다른 검색의 상황들(모임 리스트 검색, 모임개설시 산이름 검색(이때는 무한스크롤), 트래킹에서 산이름 검색(이때도 무한스크롤...))과 같다고 생각해 검색api의 경우 코드를 재사용하기위해 한꺼번에 관리했는데,
검색페이지에선 지도에 마커를 보여줘야해서 무한스크롤로 보여주지 않는다는것을 까먹었다..
결국 데이터를 기존데이터에 쌓아가서 발생하는 문제였고...ㅎㅎ
바로 이 경우만 별도로 기존데이터를 추가해주는 로직에서 교체해주는 로직으로 바꿨다.
위에 정리 한 것 말고도 많았는데(...ㅠ) 가장 impact 있던 것 위주로 정리해봤다.
배포하기전에 오류를 잡는다고 잡았는데 생각도 못한 오류들이 뿅뿅 나타나서
이맛에 사용성 테스트가 필요하구나... 를 절실히 느꼈다ㅎㅎ
아마도.. 우리의 오류잡기는 계속될 것이다..⭐
참고 링크
UT(Usability Test)를 통해 찜꽁 프로젝트 UI/UX 개선하기
사용성 테스트 UT의 중요성
우리는 고객을 전혀 모르고 있었습니다, UT를 하기 전까지는
UT(사용성 테스트)로 고객 이해하기
