사용자 친화적인 UI/UX 만들기

[chsua]

기능개발에 급급했던 3단계를 지나 4단계가 되면서 무엇을 해야 하는지 고민을 했습니다.!

그중 3단계 데모데이 피드백 중 사진 첨부 여부에 대한 피드백이 생각이 났습니다.
저는 해당 부분을 만들면서 사용자가 충분히 이해할 것이라고 생각했고, 한번에 이해하지 못하더라도 반복적으로 사용한다면 해당 부분을 학습할 수 있을 것이라고 생각했습니다.

그리고 그 생각은 굉장히 큰 오산임을 깨달았습니다. 한 사람이 아닌 여러 사람이 해당 부분에 대해 언급했고 UI/UX를 구상하는 데 기준이 "사용자"가 아닌 "나"에게 맞춰져있었구나 생각이 들었습니다.

해서 UI/UX를 전체적으로 개선하고 싶다고 생각이 들었습니다.
참고한 사이트에서는 UX를 위해 10가지 원칙을 제시하고 있습니다.

1. 우리는 사용자가 아니다
2. 각 화면에서 한 가지 행동에만 집중하게 한다
3. 반응을 보여줘야 한다
4. 맥락 있는 흐름을 만든다
5. 시각적 일관성을 유지한다
6. 예상할 수 있어야 한다
7. 의미 있는 움직임만 보여준다
8. 누구나 이해하기 쉬운 글을 제공한다
9. 사용자의 익숙함을 존중한다
10. 필요한 만큼만 단순하게 디자인한다

해당 원칙들이 무조건적으로 옳은 것은 아니나 생각해볼만한 부분이라고 생각들었습니다. 위 원칙들을 모두 고려하는 것이 어렵다면 우리도 우리만의 UX 기준을 만들어 수정해보고 싶어졌습니다.
UX기준을 지키기 위해 여러 노력한다면 사용자 친화적인 경험을 만들 수 있고, 그 결과를 글로 정리한다면 보다 명확하게 우리가 추구하는 개발 가치를 이야기할 수 있게되지 않을까 생각이 들었습니다.

프론트엔드의 의견이 궁금합니다.

[Gilpop8663]

우리만의 UX 기준을 만들어보는 시간이 필요하겠군여

먼저 제안해주셔서 감사합니다 좋은 글 잘 보았어요👍👍👍

[inyeong-kang]

제가 생각한 사용성 좋은 UI는,

1. 사용자를 당황시키지 않는 UI (예를 들어 이걸 열면 다른 콘텐츠가 안보이는군 등),
2. 사용자를 의문스럽게 하지 않는 UI (예를 들어 이 버튼은 무슨 용도지? 등)
3. 사용자를 알아서 UX를 쌓도록 방관하지 않는 UI
4. 8살 아이, 80살 어르신처럼 UX가 많지 않아도 쉽게 이해할 수 있는 UI

편한 UI에 집중하기보다는, 불편함과 당혹감을 주지 않는 요소를 줄이는 것이 좀 더 중요하다고 생각했습니다😀

[chsua]

철학

• 익숙한 UI 만들기

규칙

• 위치/목적에 따른 분별 가능한 텍스트 크기
  • 게시글 제목/ 카테고리/ 작성자 닉네임/일시/내용/선택지
  • 댓글
  • input placeholder
  • 입력 안내사항(닉네임 수정)
  • 공지사항
  • 토스트 에러 메세지
  • 에러 메세지
• 예상 가능한 트리거 만들기
  • 페이지 이동
  • 카테고리 즐겨찾기
  • 전체 게시물 보기/카테고리별 게시물 보기로 이동
  • button과 링크는 cursor: pointer 로 보이기
• 거슬림 없는 렌더링
  • 짧은 시간 유지되는 스켈레톤은 생략
  • 기대 컴포넌트와 유사한 스켈레톤
  • 페이지 전환 시 깜박이지 않음
  • interaction에 즉각적으로 반응하는 UI
  • 여러 페이지에서 동일한 레이아웃 유지
• 익숙한 기대에 부응하기
  • 모달, 셀렉터, 검색바에서 배경을 눌렀을 때 해당 interaction을 중지하겠다고 인지하고 UI 닫기처리
  • 모바일과 탭/ 데스크탑에서 유사한 UI 위치시키기
  • 기능이 예상 가능한 icon 사용하기
  • 환경설정, 공지사항과 마이페이지 분리하기
• 예외처리, 오류, 불가한 행위는 가능한 빠른 고지
  • input에 유효성 검사 처리하기
• 사용자 친화적인 에러
  • 사용자에게 익숙한 언어로 에러 메세지 작성
  • 오류 발생 상황에 따른 차별적인 에러처리

[Gilpop8663]

철학

• 동작할 것 같은 기능이 왜 안되지? 를 느끼지 않게 하기
• 사용하는데 뭔가 불편한데? 를 미리 방지하기

구체화

• 이미지를 크게 보고 싶어 - 이미지 클릭 후 이미지 확대되는 것을 기대하기
• 목록이나 뒤로가기가 있으면 좋겠다 - 홈을 누르니 스크롤이 초기화되서 불편해 - 뒤로가기 버튼시 스크롤 유지시키기
• 댓글 작성 후 내가 댓글을 작성한 곳으로 스크롤이 되면 좋겠어
• 토스트가 중복되서 나오는 것이 어색해요
  
• 게시글 작성 시 링크를 [[ ]] 에 넣는 것이 불편해요 -> 링크 첨부되도록 개선
• 카테고리 3개를 골랐을 시 자동으로 닫히면 좋겠어요, 혹은 카테고리를 선택해달라는 경고가 있을 때 카테고리 창이 열리면 좋겠어요