Skip to content

  • Projects
  • Groups
  • Snippets
  • Help
  • Sign in / Register
Minds Frontend
Minds Frontend
  • Project overview
  • Repository
  • Issues 350
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 60
  • CI / CD
  • Security & Compliance
  • Packages
  • Wiki
  • Snippets
  • Members
  • Collapse sidebar
  • Graph
  • Charts
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Minds
  • Minds FrontendMinds Frontend
  • Issues
  • #2148

Closed
Open
Opened 2 months ago by Jack Ottman@jotto141
Report abuse New issue

Navigation UX

Goals

  • Consistent navigation for all major features
  • Mobile and web
  • Allow users to easily find areas of site relevant to them

General Design

Includes:

  • Responsive, high-level UI across large, medium small screens.
  • Dark and Light modes
  • Notification dropdown
  • User dropdown
  • Search input (includes search auto suggest)

Updated links and comments below

Web - Dark

Large

https://invis.io/KWU1X9IEB2U#/400020224_Web_Large_-Dark-

Medium

https://invis.io/KWU1X9IEB2U#/400021493_Web_Medium_-Dark-

Small

https://invis.io/KWU1X9IEB2U#/400022522_Web_Small_-Dark-

Web - Light

Large

https://invis.io/KWU1X9IEB2U#/400026008_Web_Large_-Light-_

Medium

https://invis.io/KWU1X9IEB2U#/400030054_Web_Medium_-light-

Small

https://invis.io/KWU1X9IEB2U#/400035770_Web_Small_-Light-

Notes

Responsiveness [large]

  • The horizontal and vertical lines should continue the full width and height of the screen at all times.
  • In medium screens, the nav icons should be right alined at all times.
    • Design shows a width 900px. But if the viewport was 950px icons should be aligned to the right and not the left.

Search

  • The entire bounding area of the text input should be clickable
  • Clicking anywhere outside of the search input or search dropdown should deactivate / close the search.
  • The five most recent search terms (for the device) should be displayed when the search is initially activated.
  • The user can clear device search history by clicking Clear History
  • As the user starts to type, the dropdown should show Predictive Search Terms and Suggested Results. Note that Suggest results should favour channels / groups etc that the user either is subscribed to, or as visited before. e.g. If I search Rami, I should see Rami Albatal before any other Rami out there.
  • On Desktop, the user should be able to navigate through the dropdown by using up/down arrow keys. Pressing enter should jump to the selected item.
  • Search input note: please disable autocomplete autocorrect autocapitalize and spellcheck

Notifications

  • Need to distinguish between Seen and Unseen notifications.
  • Notifications should be grouped together. If a single post received 100 up-votes, we should not display 100 individual notification. Rather we should display them as a single notification. e.g. Michael and 99 others liked “My first post”.
  • A notification should be marked as seen, simply by activating the notification dropdown. In this case
  • A red dot, with unseen notification count should display when there are any unseen notifications.
  • If seen/unseen state should be persisted centrally, so between devices (e.g. web and mobile) the state of seen and unseen notifications are consistent.
Edited 25 minutes ago by Michael Bradley

Related issues
0

  • Discussion 2
  • Designs 0
  • Jack Ottman @jotto141 added Priority::2 - Normal Product::Platform Status::Design scoped labels 2 months ago

    added scoped labels

  • Jack Ottman @jotto141 added to epic &93 2 months ago

    added to epic &93

  • Brian Hatchet :speech_balloon: @brianhatchet added 1 deleted label 1 month ago

    added 1 deleted label

  • Brian Hatchet :speech_balloon: @brianhatchet added Priority::1 - High scoped label and automatically removed Priority::2 - Normal label 1 month ago

    added scoped label and automatically removed label

  • Mark Harding @markeharding added Priority::2 - Normal scoped label and automatically removed Priority::1 - High label 1 month ago

    added scoped label and automatically removed label

  • Brian Hatchet :speech_balloon: @brianhatchet changed due date to December 11, 2019 1 month ago

    changed due date to December 11, 2019

  • Brian Hatchet :speech_balloon: @brianhatchet added Priority::1 - High scoped label and automatically removed Priority::2 - Normal label 1 month ago

    added scoped label and automatically removed label

  • Brian Hatchet :speech_balloon: @brianhatchet added Status::Planning Breakdown scoped label and automatically removed Status::Design label 1 month ago

    added scoped label and automatically removed label

  • Brian Hatchet :speech_balloon: @brianhatchet added Status::Design scoped label and automatically removed Status::Planning Breakdown label 1 month ago

    added scoped label and automatically removed label

  • Michael Bradley @michaelfbradley changed the description 3 weeks ago

    changed the description

  • Michael Bradley
    Michael Bradley @michaelfbradley · 3 weeks ago
    Developer

    Links for the new, high-level design across dark & light modes, and all three screen sizes too.

    Note: some work to be done on the 'Composer Modal', so consider that a WIP. Questions, feedback etc welcome.

    cc @jotto141 @ottman @markeharding @brianhatchet

  • Michael Bradley @michaelfbradley changed the description 3 weeks ago

    changed the description

  • Bill Ottman :dragon_face: @ottman added Status::Scheduling scoped label and automatically removed Status::Design label 1 week ago

    added scoped label and automatically removed label

  • Bill Ottman :dragon_face: @ottman added Status::Backlog scoped label and automatically removed Status::Scheduling label 1 week ago

    added scoped label and automatically removed label

  • Bill Ottman :dragon_face: @ottman added Sprint:01/15 - Yeasty Yabby scoped label 1 week ago

    added scoped label

  • Brian Hatchet :speech_balloon: @brianhatchet removed 1 deleted label 1 week ago

    removed 1 deleted label

  • Michael Bradley @michaelfbradley changed the description 47 minutes ago

    changed the description

  • Michael Bradley
    Michael Bradley @michaelfbradley · 45 minutes ago
    Developer

    FYI: Web high level designs (nav) packaged-up. Links and any design notes include within the original comment.

    We should do a quick run-through just to confirm / sign-off on the above, before getting handed over to the devs.

    The equivalent for mobile app is incoming, will land before the COB.

    cc @jotto141 @ottman @brianhatchet @markeharding

  • Michael Bradley @michaelfbradley changed the description 25 minutes ago

    changed the description

  • Brian Hatchet :speech_balloon: @brianhatchet added Sprint::01/01 - Xerothermic Xenarthra scoped label and automatically removed Sprint::01/15 - Youthful Yabby label 19 minutes ago

    added scoped label and automatically removed label

  • Brian Hatchet :speech_balloon: @brianhatchet changed due date to January 10, 2020 19 minutes ago

    changed due date to January 10, 2020

  • Brian Hatchet :speech_balloon: @brianhatchet changed milestone to %Sprint::01/01 - Xerothermic Xenartha 18 minutes ago

    changed milestone to %Sprint::01/01 - Xerothermic Xenartha

Please register or sign in to reply
Assignee
Michael Bradley's avatar
Michael Bradley @michaelfbradley
Navigation Structure (UX)
Epic
Navigation Structure (UX)
Sprint::01/01 - Xerothermic Xenartha
Milestone
Sprint::01/01 - Xerothermic Xenartha
Time tracking
No estimate or time spent
Jan 10, 2020
Due date
Jan 10, 2020
4
Labels
Priority::1 - High Product::Platform Sprint::01/01 - Xerothermic Xenarthra Status::Backlog
None
Weight
None
Confidentiality
Not confidential
Lock issue
Unlocked
5
5 participants
user avatar
Michael Bradley
user avatar
Brian Hatchet
user avatar
Jack Ottman
user avatar
Bill Ottman
user avatar
Mark Harding
Reference: minds/front#2148