새로운 헤더 드롭다운/알림 메뉴 스타일

파란색 안 읽음 표시가 약간 지그재그 모양이라, 설명 텍스트가 너무 일찍 잘리는 것 같습니다.

읽음 알림이 "회색으로 처리"되므로, 이제 점 표시가 전혀 필요 없을 수도 있겠네요.

6개의 좋아요

잘리는 현상은 가독성을 높이기 위해 '단어 경계’에서 잘리도록 설정했기 때문입니다.

지그재그/불규칙한 점 배치는 주제 목록과 사이드바에서 사용하는 방식입니다. 피드백을 바탕으로 이 방향으로 진행했지만, 개인적으로는 모두 가장 오른쪽 영역에 위치하도록 하는 것을 선호합니다.

흥미로운 제안이네요.

현재 우리 UI에서는 두 가지 패턴을 혼합하고 모방하고 있습니다.

사이드바의 읽지 않은 항목:
파란 점

주제 목록의 읽지 않은 항목:
파란 점, 그리고 텍스트에 기본 색상 적용

2개의 좋아요

알림 유형 아이콘이 있는 점이 충분히 유사해서 오른쪽에 하나 더 넣을 필요가 없지 않을까요? (일치하도록 더 밝은 3차 색상으로 하면 될까요?)

제목의 두 번째 줄이 빠져 있습니다. 단어 3개는 너무 짧네요!

4개의 좋아요

네, 이제야 배경색이 있는 아이콘이 일종의 “파란색” 점 알림 역할을 하고 있다는 게 조금씩 보이네요.

음… 이건 잘 모르겠네요. 아이콘이 있는 상태에서 대비가 애매합니다. 그래도 아이콘 색상도 변경할 수는 있겠네요.

사람들이 잘림보다 더 많은 단어를 선호한다는 피드백을 충분히 받았다고 생각합니다. 그 부분을 제거하겠습니다.

3개의 좋아요

이미 확인하거나 닫은 알림과 새로운 알림을 구별할 수 있는 표시를 다시 보여줄 수 있을까요? 현재는 차이가 전혀 보이지 않습니다.

2개의 좋아요

이걸 못 보신다는 말씀이신가요?

아니면, 여기서의 차이가 충분히 뚜렷하지 않나요?

Gmail 모바일 앱의 스타일을 에뮬레이션하는 것에 대해 궁금합니다. 이미 확립된 패러다임이니까요.

(굵은 글씨 vs. 가느다란 글씨)

또한 Apple 모바일 메일도 흥미롭네요. 처음에 제안했던 왼쪽에 점을 두는 방식이죠.

2개의 좋아요

조금 더 나쁘지 않네요.


목표는 토픽 목록을 모방하는 것입니다. 하지만 여기서는 항목이 매우 컴팩트하고 밀집되어 있어 본질적으로 더 많은 차별화가 필요할 수 있습니다. 사이드바/토픽 목록의 일반적인 규범에서 약간 벗어나는 것은 나쁜 일이 아니라고 생각합니다.

1개의 좋아요

알림 드롭다운에 새로운 항목만 있었고, 다른 것처럼 보이는 표시도 없었기 때문에 전체 페이지 알림을 확인하기 전까지는 읽은 항목에 있는 우울한 회색 아이콘을 눈치채지 못했습니다.

읽지 않은 항목이 있을 때의 '파란 바다’를 좋아했습니다. '와, 내 시선을 향해 너무 많은 색이 쏟아지네’라고 생각한 적은 단 한 번도 없었습니다. 그저 내 주의를 요하는 것이나 실제로 나와 대화하고 싶어 하는 사람이 있다는 것을 쉽게 알아볼 수 있었기 때문입니다.

4개의 좋아요

정말 좋은 피드백입니다. 파란색이 가득한 바다 속에서 "이 모든 것을 비워야 한다"는 점이 꽤 명확하게 드러납니다.

그 부분을 제거하면 확실히 눈에 띄는 정도가 떨어지네요. 그런 목적만으로도 점을 다시 도입하는 것이 좋은 방법일 수 있습니다.

3개의 좋아요

나에게 파란색과 회색의 차이는 매우 미미합니다. 이는 아마도 WCAG 팔레트 때문에 회색이 더 어둡기 때문인 것 같습니다. 읽음 알림이 흰 배경 위 회색 아이콘으로 유지되기를 선호합니다. 그렇게 하면 차이가 더 명확해집니다.

물론 색상 차이는 볼 수 있지만, 읽은 알림만 있는 경우 읽은 알림이 읽지 않은 것처럼 보인다고 느낍니다.
The image displays a chat interface with a discussion thread focused on selecting and customizing theme elements. (Captioned by AI)

또한 https://meta.discourse.org/my/notifications 페이지에서는 이제 회색 배경 위에 검은색 아이콘이 보입니다.
image


봉투 아이콘을 클릭하여 PM 관련 알림만 표시하도록 하면, 모두 읽은 상태임에도 불구하고 모든 메시지가 읽지 않은 것처럼 보입니다.
image

4개의 좋아요

오늘 아침 잠깐 들러서 여러분께 이 피드백을 정말 감사하게 생각하고 있다고 말씀드리고 싶었습니다. 이렇게 짧은 기간 동안 여기 제시된 아이디어들을 함께 반복 개선해 나가는 것이 좋았습니다.

읽지 않은 항목에 대한 표시가 조금 더 명확해야 한다는 느낌이 듭니다. 그래서 저는 다시 파란색 점을 선호하는 편입니다.


아, 맞다… 이건 이상적이진 않네요. 감사합니다!

흥미롭네요… 한번 살펴보겠습니다.

현재 이터레이션의 레이아웃을 정말 좋아합니다. 관련 정보를 컴팩트한 아이템 안에 잘 담아내고 있고, 전체 목록의 간격도 여전히 넉넉하게 느껴집니다. :+1:

상태 표시에 대해서는 각 옵션에 대해 강한 선호도가 없습니다. 하지만 디자인 탐색 과정에서 이를 더 포괄적으로 다룰 수 있다면 좋겠습니다. 현재 완전하게 일관된 시스템이 자리 잡지 않은 상태인데, 단순히 알림 메뉴에 맞는 방식을 찾는 것보다 앱 전반에 걸친 상태와 컨텍스트를 매핑하는 더 넓은 탐색을 거친 후 변수를 적용하는 것이 훨씬 좋을 것 같습니다.

예를 들어, 상태(읽음/안 읽음)가 토픽 목록과 유사한 것은 맞습니다. 하지만 컨텍스트는 다르며, 유사한 컨텍스트(다른 메뉴 패널)에서는 더 은은한 회색이 일반적으로 해당 상태를 나타내지 않습니다. 현재 방식은 다른 메뉴 항목들도 마치 어떤 음소거 상태(muted state)를 나타내는 것처럼 보이게 만듭니다. 따라서 더 체계적인 매핑이 있다면 정말 도움이 될 것 같다는 느낌이 듭니다.

5개의 좋아요

현재로서는 Discourse의 두 부분에서만 “읽음/안 읽음” 스타일링 상태를 사용하고 있습니다.

이 메뉴의 다른 부분은 “선택됨” 상태입니다. 이는 현재 선택된 알림 탭을 표시하기 위한 것입니다. 이번 반복(iteration)에서는 사이드바 항목의 선택됨 상태를 모방하고 있습니다.

메뉴에서 검토하고 있는 요소들의 기본 감사(audit) 내용입니다. 읽음, 안 읽음, 선택됨

사이드바
사이드바에서는 "안 읽음"을 점(dot)으로 표시합니다. 파란색 점이 없으면 기본적으로 "읽음"으로 간주됩니다.

사이드바 - 활성(active)
현재 선택된 사이드바 항목, 즉 활성 상태입니다.

토픽 목록
토픽 목록에서는 현재 파란색 점을 표시하고 제목 및 메타데이터의 색상을 사용하여 구별합니다. 단, 팔로우/관심사(to you are not following/watching)하지 않는 토픽에는 파란색 점을 표시하지 않습니다. 따라서 파란색 점이 표시되는지 여부가 사용자에게 즉시 명확하지 않을 수 있습니다.

메뉴
여기서는 활성 선택을 표시하기 위해 selected(선택됨) 상태를 사용합니다. 이것이 알림으로 직접 변환되지는 않는다고 생각하지만, 메뉴 알림의 현재 탭 선택 상태로는 적용됩니다.

현재 선택됨 상태에 사용하는 색상에 일관성이 없습니다.

추적(tracking)에는 회색을 사용합니다.

현재 선택된 카테고리에는 파란색을 사용합니다.

사용자 알림 페이지
이 페이지는 현재 반복(iteration)에서 작업이 필요합니다.

2개의 좋아요

항상처럼 당신의 작업을 정말 감사히 생각하고 있으며, 특히 이 부분에 집중해서 작업해 주신 점이 좋습니다.

버튼/섹션 모서리의 패딩(padding)을 적용한 이유가 무엇인지 여쭤봐도 될까요?

솔직히 그 의도가 잘 모르겠는데, 제가 무언가를 놓치고 있는 건지 모르겠습니다.

둥근 모서리에 추가 패딩이 없는 지금 모습이 정말 아름답네요 :slight_smile:

1개의 좋아요

사이드바를 더 밀접하게 모방하기 위해서입니다.

1개의 좋아요

이해합니다. 버튼에 여백을 제거한 마지막 업데이트가 더 좋아 보이네요 :ok_hand:

이러한 세밀한 개선에 대해 어떻게 생각하시나요?

오른쪽 활성 버튼 패널의 호버 효과를 제거하고, 왼쪽 패널에는 은은한 블렌드 효과를 적용하는 것입니다.

이렇게 하면 패널과 버튼을 명확하게 구분할 수 있으며, 활성 알림과 패널이 동시에 있을 때 인터페이스가 과도하게 채워지거나 ‘완전히 칠해진’ 것처럼 보이는 것을 방지할 수 있습니다.

여기서는 여기에서 받은 추가 피드백에 기반한 반복 개선 아이디어를 공유합니다.

3개의 좋아요

아마도 이미 확인한 알림에 흰색 배경을 사용하느라 익숙해서 그런지, 다른 부분에서는 회색 배경을 사용하지 않는 테마에서 이렇게 넓은 영역에 회색 배경을 쓰는 것이 좀 어색해 보입니다.

2개의 좋아요

이 실험은 이제 메타에서 다시 활성화되었습니다. 실험 그룹에 꼭 가입해 주세요.

3개의 좋아요