Redesign start page

[aadcg]

The startup page is not intuitive enough, even for those who might be comfortable with programs like Emacs.

Previously our startup page listed basic keybindings, but now it links to the tutorial where these can be found. The idea of using a panel buffer for that purpose has been suggested.

Requirements:

• All actionable elements must be styled in a way that makes it obvious how to interact with them;
• Must introduce a handful of keybindings for the user to make its first steps;
• Must be a variation of the new Nyxt's website start page (that @lansingthomas is designing).

CC @aartaka @lansingthomas @jmercouris

[lansingthomas]

update:

I am focused on redesigning this start page and the first few steps of the quick-tutorial. I am very happy to talk about it if anyone wants to set up a time. I have some prototypes done, which could prompt some useful discussion.

[aadcg]

@lansingthomas and @aartaka are working together on a quick-tutorial, which is an important step to close this issue.

[aadcg]

I don't think we can achieve this in a short amount of time.

Is this a goal for 3.0? CC @jmercouris @lansingthomas @aartaka

[jmercouris]

Yes, I think it is. This is a very important page!

[aadcg]

Then I'd suggest putting most (if not all) UI efforts in this front. I can easily imagine that closing this one would take 1 month.

[aartaka]

It's not necessarily 3.0, because things can move in parallel and website is by no means (except content-wise) hard-linked to Nyxt itself.

I share the sentiment that the website redesign is important for our public image, though.

[aadcg]

My view is that Nyxt's start up page is more important than the website's front page. The latter can lag behind and be redesigned after the release.

[aartaka]

Oh wait, sorry, I've confused stuff up :sweat: Yes, nyxt:new is important!

[lansingthomas]

I am happy (enough) with the written copy for the tutorial in our shared doc @aartaka . The only section remaining is Advanced Use.

• I think we need to publish a version of this to iterate better.

[lansingthomas]

what do you guys want to see differently on the internal nyxt page:new?

Here are some possibilities as a starting point. You will notice that I am not suggesting any major changes. I think the current state appropriately minimal.

This first mockup is about layout and the CTA, please ignore the experimental changes to the button titles:

[1] a side layout for the buttons (personally I don't like it, because it clutters panel buffers) -- but it is nice to remember why we have things on the top. [2] Moving the central elements a bit is a possibility. [3] adjusting the colors to bring attention to the CTA is good practice. To me the big branded "Nyxt" title is background and the interact-able elements are the parts to highlight.

---

---

this second image depicts a change in color without change in alignment

generally for this page

The spacing and alignment of the buttons across the top seem sensible to me. The "Other useful links" dropdown moves around when opened which is a bit painful, but not a high priority. The tutorial + how do I... buttons need to be improved... -- standby

[lansingthomas]

this comment is the place! (to talk about our call to action button)

• I guess the two things going on here are [1] searching the web, [2] opening a URL
• We are also teaching people to use the keyboard instead of the primitive mouse or track pad.
• Start Searching! is fair -- I would like something that showcases our secret sauce a little better, and I want your ideas.
• a typical call to action has a business case for encouraging its use -- for us here today... I would rather have our users just get straight to the keyboard. I think I used this button once or twice before going for C-l or M-l.

Perhaps a new name for it:

• Nyxt
• Start Searching (without the !)
• Some other active verb {activate, initiate, commence, launch, begin...}
• open URL
• C-l

OR, tell my why Start Searching! is good and I can move on.

@jmercouris @aadcg @aartaka @Ambrevar anyone have anything better?

[aadcg]

@lansingthomas I agree with you that the 'Start Searching!' button isn't a very good idea. I think the right call of action would be to trigger the set-url command.

With respect to the design of the start page, I don't have any strong opinions. My only observation is that vertically stacked buttons (possibly in 2 columns) would make more sense (over row alignment) in such a page. Top nav bars in websites make sense since it makes room for the content below. But the situation in the start up page is quite different. Each button is a call to action, so they should be displayed in the user's face.

Notice that the on-color of the accent color in the light theme is black, not white!

[aartaka]

I agree that "Start Searching!" is not a perfect message. I had doubts about what to say there when adding it in the first place. Not sure what action this button is better named by.

[lansingthomas]

Beautiful. thanks @aadcg @aartaka for the ideas and attention. Okay, I'm going to prototype with set-url as the CTA

1. it positions nyxt commands as the replacement for searching.
2. It is more precise
3. It teaches the name of an important nyxt function

if you have a better idea, you know what to do.

[lansingthomas]

Hi Enginerds! <3 < 3

To make this change happen before 3.0 we need some things.

• [x] team alignment on a layout / design here in this issue
• [ ] someone to go review Artyom's PR for the quick-start tutorial

preface: I recognize that this is a number of changes at once. Please direct your feedback to specific parts of the proposal and remember that we wanted something "quick, and a little better" --- THANK YOU for your continued efforts

---

So far... we have verbal or written buy-in from:

• [x] John @jmercouris
• [x] Artyom @aartaka
• [x] Andre @aadcg
• [x] Pierre @Ambrevar

---

Here is the proposal for the great 2023 start page redesign.

What it looks like:

---

What has changed

also:

• arrows on the CTA buttons (nice and thick, show some movement)

---

why the changes

teal [1] - subdue top button importance to direct attention to the CTAs below teal [2] - minimize distractions, close unnecessary detours for uncommon actions (prompt buffer is a better way to get these done), removing the extra buttons minimizes perceived complexity. teal [3] - establish conventions for the naming of invocations/commands, consistency in our lexicon.

blue [1] - users on this page already know where they are we do not need to hit them with the logo in a big way. It reads "Nyxt" across the top of the window, and in the lower right. They just had to launch it to get here. Other browsers do not display a big brand logo here (except Firefox). blue [2] - anticipation of user needs. blue [3] - matches mental model for how the prompt buffer works, prompt buffer can be different things, let's prevent some errors by providing both of our "main menus" on this neutral and accessible page. blue [4] - more anticipation of user needs - slamming return should press the big button in the middle.

red [1 and 2] - The eye path tends to form a big Z and this is the second stop (First is our CTA of course). A little color here makes the rest of the design appear balanced, and not so... pathologically gray. red [3] - parentheses and adjacency to the version number communicate that the webkit is something that may change over time. The forward slash kind of falsely hints that there is a filepath/going on/when there is not. red[4] - this text block element does not need to travel, once a user has moved to the prompt buffer they do not need this extra contextual information. Let's give back some screen real estate.

how we got here

• ideas from this thread have been incorporated
• prototypes have been presented to both John and Artyom and I attempted to incorporate the best ideas from that feedback.

also some spacing things

Definition of Done Checklist

• [ ] spacings look good
• [ ] CTA and top-left-button alignment match.
• [ ] both CTAs are covered by the prompt buffer when open
• [ ] set-URL CTA is located such that mouse pointer is in the input field of prompt buffer immediately after pressing the CTA.
• [ ] CTAs have arrows that look close to what I have presented here.
• [ ] teal 1
• [ ] on-colors are changed to match appropriately with new button colors.
• [ ] teal 2
• [ ] teal 3
• [ ] blue 1
• [ ] blue 2
• [ ] blue 3
• [ ] blue 4
• [ ] red 1
• [ ] red 2
• [ ] red 3
• [ ] red 4

Yay Nyxt!

[Ambrevar]

While overall I like the rationale, I find the end result jarring to the eye. I believe what bigs me the most is the lack of a central item. I kind of like the Nyxt logo at the center, and I'd vote to restore it: Even though we already know that we are running Nyxt, we want to emphasize it's Nyxt's startup page. Without it, it feels like any other internal page and it's not very clear what we are looking at.

[aadcg]

I think @Ambrevar has a point here.

I think that Nyxt's start page should be similar (not necessarily an exact copy) of Nyxt's website.

[lansingthomas]

I see what you mean @Ambrevar @aadcg

I want our page to look great with prompt buffer open or closed.

How about this:

---

With prompt buffer:

[lansingthomas]

Spacing mockup update:

[Ambrevar]

Two questions:

• What do you think about using the Nyxt logo instead of just the text?
• Why not horizontally centered?

[lansingthomas]

@Ambrevar I am liking the logo.

How about like this :

---

And with prompt buffer open: (black border has been added to CTA button for this state)

---

Why not horizontally centered?

best question ever. I think it looks cool with left alignment as we sort of have this 1:2 and 2:1 ratio going on. Which is fantastic reflection/recursion.

Douglas Hofstadter writes:

“We have seen recursion in the grammars of languages, we have seen recursive geometrical trees, which grow upwards forever, [...]. Now we are going to see yet another way in which the whole world is built out of recursion."

[aadcg]

Personally, I like this last iteration by @lansingthomas!

[Ambrevar]

Me too! Also Hofstadter is a neat reference! :)

[lansingthomas]

@aadcg Andre, you asked me to experiment with some equal button widths for this start page layout. I tried it and quickly learned that the button group becomes too wide to look nice on narrower displays / windowed resolutions. Good idea, and the scaled button width is best!

We had also talked about placing the buttons in such a way that some of them are covered by an open prompt buffer. The more I experiment with it the less I like it. I notice that covering buttons gives a sense of closing off options, and the point of this page is to be a nice mental anchor point in our system. So, let's keep the buttons high and obvious.

For whoever assigns themselves this project:

This could be enough information to get this new layout built: (comment if you want any more)

---

Main elements:

---

alignment:

• [x] @jmercouris
• [x] @aartaka
• [x] @Ambrevar
• [x] @aadcg You all cool with this spec? It is the design from above.

---

the crisp and pointy arrow I like is here for copy pasta: →

Thank you!

[aadcg]

Thanks @lansingthomas!

Who is taking this one? Maybe @jmercouris?

[jmercouris]

I can take!

[lansingthomas]

light theme colors

surface colors, text colors, buttons in :default state

dark theme amphora colors

assorted details

1. Interaction states -- pseudo-classes are WIP

• if you get there before I do just make good choices, they should be mostly elaborated in the Interaction State Guidelines in #3005

2. purple tile for dark mode

WIP I will add it soon.

[aadcg]

@jmercouris I'd suggest that you should focus on this issue, while I'll take #3005.

[jmercouris]

OK, @aadcg Agreed.

[aadcg]

Issues:

• 2676

• 2890

Must be revisited when the PR that closes this issue is opened.