codestates / codestates/vote-it

[Task] UX/UI 개선 제안

Open
#177 0 comments 0 reactions 3 assignees Claimed by @alsqja View on GitHub
client help wanted
Dominant language
TypeScript
Stars
0
Forks
3
PR merge metrics
No merged PRs in 30d

Description

## 목적
 사용자로 하여금 사이트에 조금 더 매력을 느끼고 적극적으로 사용할 수 있도록 하기 위함입니다. 여러분이 어떤 사이트에 접속했을 때, 뭔가 거부감이 들고 별로 사용하고 싶지 않은 사이트가 되지 않기 위해 필요하다고 생각되는 요소들을 정리해보았습니다. 사소해보이지만 사이트를 구성하는 데 있어 중요하다고 생각되는 부분이라고 생각합니다. 특히, 매일 마주하는 우리는 눈에 익숙하지만 처음 들어오는 사용자들은 불편하다고 느낄만한 점이 있을 수 있습니다. 아래 제안점들이 정답은 아니며, 스프린트가 종료되는 시점까지 지속적으로 비판하여 UI를 개선할 필요가 있습니다.
## Will Try
* **각 구획을 테두리로 감싸기**: 사용자가 공통된 역할을 지닌 요소들을 한 번에 인식할 수 있도록 유도하고, 구획마다의 역할을 명확히하기 위함
* **여백을 적절히 사용**: 화면이 너무 꽉 차 답답해보이는 느낌이 없도록 개선하기 위함
* **한 화면 내에서 UI 변화 시 애니메이션 효과 추가**: 시각적으로 좀 더 자연스러운 UI 변화를 위함
* **적절한 가로/세로 정렬**: 요소들을 적절하게 정렬하여 보기 좋게 배치(나쁜 예시: [불편한 짤](https://www.google.com/search?q=%EB%B6%88%ED%8E%B8%ED%95%9C+%EC%A7%A4&sxsrf=APq-WBvJ_kHp1sQe2erRN_YUwAi4Z-aQ7A%3A1645750587308&ei=OykYYsqpEtO6hwOjzZTABg&ved=0ahUKEwiKs5TZ0pn2AhVT3WEKHaMmBWgQ4dUDCA4&uact=5&oq=%EB%B6%88%ED%8E%B8%ED%95%9C+%EC%A7%A4&gs_lcp=Cgdnd3Mtd2l6EAMyBAgjECcyBggAEAcQHjIGCAAQBxAeSgQIQRgASgQIRhgAUABYAGDYAWgAcAF4AIABzAGIAcwBkgEDMi0xmAEAoAEBwAEB&sclient=gws-wiz))
* **각 요소들의 UI 형태 통일**: 어떤 한 요소가 따로 노는 느낌을 받지 않도록 개선하기 위함
* **사용 가능한 기능들을 사용자가 인지 및 연속적 사용이 편하도록 배치**: 예를 들면, 자주 사용되어야 하는 기능들은 잘 보이고 클릭하기 편한 위치에 연속적으로 배치하고, 그렇지 않은 기능들은 사용자가 인지하기 힘들도록 잘 보이지 않는 위치(하단 또는 화면 외곽)에 배치
* **모바일 화면에서 사용에 불편이 없는지 점검하고 개선**: 사용 빈도에 따라 손가락으로 터치하기에 좀 더 적절한 위치에 배치 시도
* 무한스크롤시 로딩중 또는 목록의 끝 상태를 표시하여 고장난 느낌이 들지 않도록 개선
* 목록에 내용물이 없을 경우에 대한 화면 렌더링 필요
- 이상 두 가지: 사용자가 페이지가 고장났다고 생각하지 않도록 적절한 렌더 현황을 알리기 위함
- setTimeout 함수가 적절히 사용되고 있는지 점검: 사이드이펙트를 최소화 하기 위함. 해당 함수가 없이도 구현이 될 경우 그렇게 하는 것이 좋다고 생각됨.
- 텍스트가 자동 줄바꿈되는 경우에 대한 렌더링 처리(말 줄임표 처리 및 날짜/시간 간략화): 테이블이나 박스가 본래 의도했던 디자인과 다르게 표시되는 경우를 대처하기 위함
- 모달 창 팝업시 스크롤링 방지
- 기타 사이트 사용시 편의성 고려: 평소 사이트를 사용하면서 필요했던 편의성 요구 충족
- 해더는 메뉴 모달창이 켜져있어도 상호작용할 수 있어야 함
- 투표글 작성 중 페이지를 벗어나도 작성 내용이 저장되어 남아있어야 함
- 사이트에 대한 가이드라인이 있으면 좋을 것같음
- 각종 입력창들을 키보드로 조작하는 기능 삽입

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.