[seqfan] Re: OEIS Frontend Redesign

Sat Jan 27 22:15:14 CET 2024

Wow, this is some truly fantastic feedback.  Thanks for taking the time to write this out.  On a couple of your points:

> When you're trying to "steal market share" from a "competitor" (not in a bad way, mind you!) you want to reduce the psychological friction of switching, as far as possible.)

If we were wanting to 'steal market share' then definitely, making a similar service that's slightly better would likely be a smoother way to do it.  This isn't our intention though, we're hoping to contribute these back to OEIS as we find what works well and then remove the features that really don't work.  We *want *to try out a bunch of weird and unique things on a platform that doesn't especially matter!

I realise I'm biased, but I'm a fan of a more modern design!  I'd like to think with so many companies heading towards it, it has general appeal to the public as well.  I'm *not* a fan of adding white space everywhere,  which is why I've still managed to keep the current design quite information dense, but also just using "#00c" can make the web really boring!

To clarify on our goals, this site was initially also called 'OEIS' (link to our first README entry <https://github.com/popey456963/intdb/blob/d28ed77e749f478bb8b8c7affbfe6584b28baec2/README.md>).

> But also, there's nothing *wrong* with the existing site's styling of *search results* AFAIC. The main thing I think of as "wrong" is the attributes on the text boxes to *edit* a sequence

It works on wide screens such as desktops, but the current style fails to work on even the largest of mobile phones (these screenshots are from an S23 Ultra, one of the largest single screen phones on the market).  Compare these screenshots:

Here, the sort / format buttons are so small they're almost illegible on my phone.  There's no way I can reliably click on without clicking the one next to it, 'references' and 'number' take up roughly the width of my finger combined!

And then there's examples like this.  I'm not quite sure why the* "example" section* in particular is so small, but even the other text is getting so small that it's hard to read.  The sidebar takes away valuable space that we get back if we make them headers instead:

It's possible a combined solution might be better?  A sidebar on larger displays like desktops, and then they collapse to headings on a mobile device.

> I also suggest that the high visibility of "Webcam" right next to "Privacy and Legal" may be a trigger.

This is hillarious and I can't believe I didn't notice the irony before.  A delimited section below for all of these 'meta' links is definitely a way better method of handling the extra links.

> A simpler and less newbie-frustrating approach would be to kill the dropdown and instead put some plain text right below the search box that says something like "*Click here* for advanced search terms id: author: keyword: [etc]", and then the link would just go to a page of documentation (or unhide a div of documentation, if you want to be all Web 2.0 about it).

I really like this idea as well, "Keep it simple stupid" comes to mind.  New users should likely get what they expect, a plain text input box that searches for that text / sequence of numbers.  Gating the more complex features under an 'advanced' mode or equivalent is nice, especially because we can provide custom inputs for each (e.g. on the keywords perhaps we could provide an autocomplete so you don't mis-spell them?).

> Have you thought about how to at least mock that up? (Like, your site could provide a "Pseudo-log in" button in the upper right corner where the "Log in" button would normally appear; and then switch into a "logged in mode" where the "Pseudo-edit" button appears; and so on. Even if you couldn't submit valid updates to OEIS, that would satisfy the goal of showing the mockup to people.)

That's not a bad idea.  We only really spent two days on this, so we had to cut some features and making it read-only seemed like a nice way to reduce complexity.  We've still got so much to do just displaying information in a more useful format, but I'll make some mockups of logging in / equivalent to make sure that none of the design decisions we make will interfere with any future capabilities like that!

--- 

Thanks once again for the really thorough and well thought out critique of the design.  I especially valued how each point you made came with clears steps to resolve it (even if I do disagree with one or two of them)!

Regards,
Alexander.

On Sat, Jan 27, 2024, at 2:57 PM, Arthur O'Dwyer wrote:
> On Sat, Jan 27, 2024 at 8:54 AM Alexander Craggs <oeis at femto.dev> wrote:
> 
> > Hey,
> >
> > I'm a big fan of the OEIS website (having used it for just over a decade
> > now), especially its ability to understand sequences covering a
> > surprisingly wide range of topics.  My friend and I stumbled across the
> > 'Suggestions for OEIS from OEIS 50 Workshop <
> > http://oeis.org/wiki/Suggestions_for_OEIS_from_OEIS_50_Workshop#General_remarks_about_making_changes_to_the_OEIS>'
> > page on the Wiki and saw a 2014 post about updating the site to HTML5 and
> > improving mobile accessibility.  The accessibility and user experience
> > improvements suggested don't seem to have come to light, the design having
> > not significantly changed since 2012 [1] <
> > https://web.archive.org/web/20101129053330/http://oeis.org/> [2] <
> > https://web.archive.org/web/20130309111854/http://oeis.org/search?q=1%2C2%2C3%2C6%2C11%2C23%2C47%2C106%2C235&language=english&go=Search
> > >.
> >
> > We wanted to try to change this, so we took a couple of days off work in
> > order to redesign it.  We focused on the following:
> >
> > - Improving entry-level use.  Instead of requiring searchers to know about
> > 'keyword:' and 'author:' tags we now include buttons to help out, whilst
> > still allowing the full complexity for advanced users.
> > - Mobile-responsive design, ensuring text is legible and buttons clickable
> > on all screen sizes.
> > - Keeping the site fast and small.  Caching allows us to save 88% of data
> > over 100 sequence searches (3MB new vs 25MB original).  We're also faster
> > on first load, the query '1, 2, 5' being 33% smaller (600KB new vs 900KB
> > original).  The page load delays are primarily caused by the OEIS server
> > responding slowly, which aren't easily fixed by us.
> >
> > The initial version is live here:
> >
> >     https://intdb.io
> >
> > It's an open source project, so you can also see the source code here on
> > GitHub, <https://github.com/popey456963/intdb> we accept contributions
> > from anyone!  We've done this in a 'hackathon' format over two days, so
> > there are numerous bugs listed here <
> > https://github.com/popey456963/intdb/issues>.
> >
> > We know it's missing a large number of key features like accessibility,
> > i18n and various links (especially my favourite 'listen' feature), but
> > wanted to put it out there to see what people thought and whether there
> > were any suggestions on ways we could improve things.
> >
> 
> IMO all the technical details you've provided (smaller, faster, etc) sound
> great.
> But personally, I like the "Web 1.0" style of interface much better than
> the rounded-corners overly-CSS'ed Web 2.0 style you've gone with. Even if
> you keep everything else 2.0-ified, I suggest that you might get better
> reception from the old fogeys (and I'm not even 40 yet!) if you *merely
> switched your color scheme* to #ffffff + #0000ff + #fffcc.
> For example, one easy psychological improvement would be to switch your
> purple color (which I can't figure what color it is because I can't figure
> out where your HTML lives, even with "Inspect" in the browser!) to #0000ff.
> 
> I also suggest that the high visibility of "Webcam" right next to "Privacy
> and Legal" may be a trigger. ;) You should move the administrivia into the
> footer and separate it from the "features" like Webcam (which IIUC is
> really just a pre-existing cute name for what StackOverflow calls "Hot" and
> Wikipedia calls "Recent Changes").
> I recommend
> - https://www.webdesignmuseum.org/gallery/google-2002
> - https://www.webdesignmuseum.org/gallery/google-2005
> as the right inspirations.
> 
> As an only occasional OEIS user, I didn't know about all the
> shortcut/keyword stuff. Pushing "Keyword" into the new user's line-of-sight
> isn't great, unless it does what the newbie would think it does. I clicked
> "Keyword" and typed "polygons": no hits
> <https://www.intdb.io/search?q=keyword:polygons&sort=relevance>. Just like
> the existing OEIS search, if I want to find results about polygons, I need
> to enter "polygons" with *no* prefix. I'm not sure what "Keyword" does,
> exactly. You could use some of that white space to the right of "Author",
> "Keyword", "ID" to explain briefly what each of them means.
> ("author:Neil Sloane" doesn't do what I'd expect, either.)
> For example,
>   Keyword — e.g. nonn, more, 2d, ... [Maybe?]
>   Author — e.g. _N.J.A.Sloane_ [Maybe?]
>   ID — go directly to a sequence, e.g. A051493
> Basically, if you're pushing something to the front for the benefit of the
> newbies, it ought to make their lives easier, not harder.
> 
> But! A simpler and less newbie-frustrating approach would be to kill the
> dropdown and instead put some plain text right below the search box that
> says something like "*Click here* for advanced search terms id: author:
> keyword: [etc]", and then the link would just go to a page of documentation
> (or unhide a div of documentation, if you want to be all Web 2.0 about it).
> 
> Getting back to the visual design:
> - When you're trying to "steal market share" from a "competitor" (not in a
> bad way, mind you!) you want to reduce the psychological friction of
> switching, as far as possible. That's the main reason I recommend matching
> the color scheme and "Web 1.0" styling and so on: less friction for my
> brain.
> - But also, there's nothing *wrong* with the existing site's styling of *search
> results* AFAIC. The main thing I think of as "wrong" is the attributes on
> the text boxes to *edit* a sequence (last time I checked, which I admit was
> a while ago). Your site right now doesn't provide editing; I assume that's
> because it doesn't provide login; I assume that's because it's
> technologically impossible for it to log people in nor check their login
> status without actually *being* oeis.org.
> - Have you thought about how to at least mock that up? (Like, your site
> could provide a "Pseudo-log in" button in the upper right corner where the
> "Log in" button would normally appear; and then switch into a "logged in
> mode" where the "Pseudo-edit" button appears; and so on. Even if you
> couldn't submit valid updates to OEIS, that would satisfy the goal of
> showing the mockup to people.)
> 
> 
> P.S. This is the first time posting to a mailing list, and I've really
> > struggled.  Hopefully this email goes through, unlike the last couple of
> > attempts!
> >
> 
> It went through! :)
> 
> –Arthur
> 
> --
> Seqfan Mailing list - http://list.seqfan.eu/
> 