Understanding user interface elements in Discourse

:bookmark: This resource covers the names for each element of the Discourse user interface.

:person_raising_hand: Required user level: All users

Here’s what Discourse’s interface looks like most of the time. Themes, theme components, and plugins may affect this layout.

Let’s break down the main parts, and then the main parts into smaller parts.

  1. Header
  2. Sidebar
  3. Main content

Header

Header

  1. Sidebar button/toggle (or Hamburger)
  2. Logo
  3. Top right icons:
    a. Search
    b. Chat toggle
    c. Notifications Menu / Avatar menu

Sidebar

  1. Sections
  2. New Section Button
  3. Keyboard Shortcuts

Main Content

  1. Navigation / Nav bar
    a. Category Selector
    b. Tag selector
    c. Navigation buttons
  2. Topics list headers
  3. Topics list

Topic

  1. Title
  2. Category
  3. Tags
  4. Avatar
  5. Username and Name
  6. Edit History Button
  7. Post Date
  8. Post Actions
  9. Reply to Post button
  10. Topic Map
  11. Topic Actions Buttons
  12. Reply to Topic Button
  13. Admin Wrench
  14. Timeline
  15. Reply to Topic Button
  16. Notification State Button

User Card

  1. Location
  2. Badge list
  3. Avatar
  4. Username
  5. Name
  6. Bio
  7. Last Activity Stats
  8. Website
  9. Cakeday (Registration Anniversary)
  10. New Personal Message Button
  11. New Personal Chat Button

Notifications menu

  1. Notifications
  2. All notifications
  3. Replies and Mentions
  4. Likes
  5. Personal Messages
  6. Bookmarks
  7. Chat Notifications
  8. Reviewable Items
  9. Other Notifications
  10. User Menu
  11. See All Notifications Button
  12. Dismiss Notifications Button

Composer

  1. Post Type Selector
  2. Topic Title
  3. Topic Category Selector
  4. Topic Tags Selector
  5. Formatting Toolbar
  6. Text Area
  7. Post Creation/Edition Button
  8. Discard Button
  9. Resizing Grip
  10. Fullscreen Toggle
  11. Minimize Toggle
  12. Preview Panel
  13. Preview Panel Toggle

Last edited by @hugh 2024-06-28T00:04:48Z

Last checked by @hugh 2024-06-28T00:04:11Z

Check documentPerform check on document:
70개의 좋아요

누군가 사이드바 내비게이션을 갖춘 Discourse 3.x에 대한 유사한 가이드를 만들거나 만들고 있나요?

2개의 좋아요

정말 구세주네요 :raised_hands:

4개의 좋아요

이 부분을 조금 업데이트해야 할 것 같아요. 잠시만 기다려 주시면, 여러분을 위해 뭔가 준비해 보겠습니다. :slight_smile:

5개의 좋아요

가이드가 매우 오래되어 새로운 스크린샷으로 업데이트했습니다 :slight_smile:
더 개선할 부분이 있으니, 제안 환영합니다!

6개의 좋아요

정말 훌륭해요 :hugs: @Canapin 감사합니다 :heart:

작은 제안 하나: 컴포저와 채팅도 포함할 수 있을까요? :slightly_smiling_face:

3개의 좋아요

알림 메뉴의 11번과 12번 항목이 없습니다.

또한 헤더에서는 아바타 메뉴라고 표시되어 있지만, 개별 헤딩에서는 알림 메뉴라고 되어 있는 것을 확인했습니다.

3개의 좋아요

이런 유형의 가이드는 아무리 좋은 의도에서 만들어졌더라도, (정성 들여) 만든 스크린샷과 주석 때문에 오래되기 쉽다는 점이 매우 걱정됩니다. 제가 아는 바로는 페이스북이나 유튜브 등에도 같은 시도가 있었지만, 몇 달이 지나면 사용자가 언급된 특정 항목을 찾지 못하는 경우가 많았습니다. 하지만 더 나은 해결책은 떠오르지 않습니다.

2개의 좋아요

위키이므로 업데이트가 필요할 때 누구나 도움을 줄 수 있습니다. 일부 요소가 변경되더라도, 다른 요소들의 명칭을 아는 것만으로도 여전히 유용합니다.
결국 모든 문서화는 구식이 될 수 있습니다. 이 이유 때문에 문서화를 하지 않는다면, 아예 문서화가 없는 것과 같습니다.

4개의 좋아요