Front page needs an indication of more content or cues to scroll down

[mialondon]

On a small screen that shows only the logo and three steps, there's no indication that there's more below. (And we have two pieces of anecdotal evidence via reports from friends that people thought that was the whole page). We could tighten up the whitespace so the call-to-action text is more likely to be visible, or use a design element to direct attention down.

With an image to illustrate the screen some people are seeing.

[scottkleinman]

If I understand this correctly, it should be fixed and pushed to master, but http://dev-serendipomatic.herokuapp.com/ does not seem to have updated.

-S

On 5 August 2013 09:55, Mia notifications@github.com wrote:

With an image to illustrate the screen some people are seeing. [image: serendipomatic-org_frontpageonsmallscreenneedsindicationtoscroll]https://f.cloud.github.com/assets/380763/911621/cbb803d8-fdef-11e2-90af-a270e5341981.png

— Reply to this email directly or view it on GitHubhttps://github.com/chnm/serendipomatic/issues/119 .

Scott Kleinman Professor of English Director, Center for the Digital Humanities California State University, Northridge

[rlskoeser]

There will always be a bit of a delay from when code is pushed to github and when it shows up on the dev heroku site. To check on the build status, take a look at the travis-ci page (also linked via the build passing/failing badge in the repo readme): https://travis-ci.org/chnm/serendipomatic/builds

The build history will show git checkins and build status - I think your commit is still being built; the heroku site should be updated at the end of that build.

[scottkleinman]

It was immediate the first time I pushed changes. Guess I just got lucky. But thanks for the info.

The 'make some magic' button is now closer to the textarea than to the footer. Can somebody check that it looks all right?

On 5 August 2013 13:09, Rebecca Sutton Koeser notifications@github.comwrote:

There will always be a bit of a delay from when code is pushed to github and when it shows up on the dev heroku site. To check on the build status, take a look at the travis-ci page (also linked via the build passing/failing badge in the repo readme): https://travis-ci.org/chnm/serendipomatic/builds

The build history will show git checkins and build status - I think your commit is still being built; the heroku site should be updated at the end of that build.

— Reply to this email directly or view it on GitHubhttps://github.com/chnm/serendipomatic/issues/119#issuecomment-22137339 .

Scott Kleinman Professor of English Director, Center for the Digital Humanities California State University, Northridge

[scottkleinman]

I think I may have misunderstood this issue. Is the problem that people don't know there is anything below "Be amazed by what turns up"? I'm not sure I see a good solution to that. We could add "Try it out" with a link that scrolls down the page. Alternatively, we could hide the glyphs if the width of the screen falls below a certain number of pixels. About the best way I can think of is to use JQuery as described at http://www.surfingsuccess.com/jquery/window-width.html.

I'm willing to try it out, but this involves design decisions. Thoughts?

[mialondon]

There was another issue about tightening up various bits of whitespace so your change is still useful.

And yes, the problem is that when people see that, it looks like such a complete page they don't get any cues to scroll - they think that's the whole thing. I think we need to step back and look at some design options before we jump into code. One early idea @fontnerd and I had discussed was incorporating cues to look down into the design (like downward-pointing arrows within the icons or a larger background page element that bridges the whitespace, etc) but they might not work now.

Does 'provide cues to scroll down and to direct attention to the first step (add text and hit go)' describe the design problem? I assume (but could well be wrong) that we hand it over to @fontnerd to consider and come back with possible options?

[fontnerd]

I'll try creating some sort of arrow graphic in the style of the serendipomatic logo... We could have it on all sizes or limit it just to the mobile...

On Tue, Aug 6, 2013 at 8:56 AM, Mia notifications@github.com wrote:

There was another issue about tightening up various bits of whitespace so your change is still useful.

And yes, the problem is that when people see that, it looks like such a complete page they don't get any cues to scroll - they think that's the whole thing. I think we need to step back and look at some design options before we jump into code. One early idea @fontnerdhttps://github.com/fontnerdand I had discussed was incorporating cues to look down into the design (like downward-pointing arrows within the icons or a larger background page element that bridges the whitespace, etc) but they might not work now.

Does 'provide cues to scroll down and to direct attention to the first step (add text and hit go)' describe the design problem? I assume (but could well be wrong) that we hand it over to @fontnerdhttps://github.com/fontnerdto consider and come back with possible options?

— Reply to this email directly or view it on GitHubhttps://github.com/chnm/serendipomatic/issues/119#issuecomment-22176527 .

[mialondon]

Thanks Amy! The person who told me about it was on a c2010 Mac laptop and my screenshot is from a netbook, so I suspect it's needed for all devices.

[mialondon]

Two useful sites for quickly checking screen size and responsive design stuff (note: not emulators so not 100% accurate and they don't include browser chrome so often less will be seen than they suggest):

• https://quirktools.com/screenfly/
• http://ami.responsivedesign.is/

[fontnerd]

Maybe we can take a more subtle approach and a have a small div that is absolute-positioned to the bottom of the page (thus will resize to the bottom of any screen that simply says "MORE ↓". We'd only need this on the homepage and we'd style it in the CSS as "display:none" for the desktop and table media queries. I can handle the CSS if anyone wants to add this to the template? I know there was some merging of templates so I'm a bit fearful of mucking things up there.

We could also embed the "More" into the page, rather than positioning it at the bottom of the screen. We could probably make the positioning conditional with the media queries as well (put it in one place on a wider screen, in another place on a smaller screen.

Thoughts on this approach? I'm concerned that anything more intrusive will take away from the on-boarding experience, with the awareness that "not knowing to scroll down" is also negatively impacting the experience.

I made a quick mock-up to explain what I mean.

[mialondon]

I think directing people's attention down is part of the on-boarding experience, as people can't take action if they don't know there's more to the page, and I think it could work with the general tone. You've probably already nailed it but I can't get your image to load to check out your mock-up, stupid github.

From https://github.com/chnm/serendipomatic/issues/103 it looks like you can edit index_base.html (which 'extends site_base.html and is the basis for the site index page') but @rlskoeser could give you the latest on that work and her questions about it.

[scottkleinman]

Amy, your idea sounds good, but I also can't see the image (is there a link that I'm not seeing?).

On 9 August 2013 02:16, Mia notifications@github.com wrote:

I think directing people's attention down is part of the on-boarding experience, as people can't take action if they don't know there's more to the page, and I think it could work with the general tone. You've probably already nailed it but I can't get your image to load to check out your mock-up, stupid github.

From #103 https://github.com/chnm/serendipomatic/issues/103 it looks like you can edit index_base.html (which 'extends site_base.html and is the basis for the site index page') but @rlskoeserhttps://github.com/rlskoesercould give you the latest on that work and her questions about it.

— Reply to this email directly or view it on GitHubhttps://github.com/chnm/serendipomatic/issues/119#issuecomment-22383836 .

Scott Kleinman Professor of English Director, Center for the Digital Humanities California State University, Northridge

[fontnerd]

Here's another idea:

Obviously, the text can change (is "Give it a whirl" too repetitive? Maybe "Give it a try?")...

[scottkleinman]

This actually already exists on the page. If you are using a screen reader, the first thing you'll encounter is a "Skip to Content" link which takes you directly to the form. All we would need to do is connect the "Give it a whirl" link to the same anchor.

Here is another suggestion. Detect screen size, and, on small screens, display a fourth button in the nav menu with "Give it a whirl" or "Try it" or something like that. That way the user sees that there is something more right at the top of the screen.

On 12 August 2013 08:49, Amy notifications@github.com wrote:

Here's another idea: [image: onboarding_scroll_down]https://f.cloud.github.com/assets/5123245/948373/72973860-0366-11e3-99e4-b7c491dd70e8.png

Obviously, the text can change (is "Give it a whirl" too repetitive? Maybe "Give it a try?")...

— Reply to this email directly or view it on GitHubhttps://github.com/chnm/serendipomatic/issues/119#issuecomment-22503151 .

Scott Kleinman Professor of English Director, Center for the Digital Humanities California State University, Northridge

[mialondon]

It's tempting to think of javascript solutions around detecting what's in the viewport, but could we try bridging the whitespace with a visual element that draws attention from the 'three steps' to the actual first step?

[briancroxall]

I wonder: does "Let's get started" need an icon to call attention to it?

Another idea: change "Let's get started" to "Let's get feeding". I don't really love that, but it would call out the connection to what comes below and the glyphs above.

Another idea: a big arrow coming off the Serendip-o-matic logo that points down. (Clearly not a good idea.)

[rpalin]

Another idea -- a simple one: Drop the second line ("Grab Some Text") and change top line to read, "Start by Grabbing Some Text." This would likely expose the top of the text box in most browsers and further indicate to users the first step in magic making.

[scottkleinman]

Or, to build on Ray's idea, "Start by Grabbing Some Text and Pasting It Below". If that's too much, another option is "Grab Some Text and Paste It Below".

On 13 August 2013 11:10, rpalin notifications@github.com wrote:

Another idea -- a simple one: Drop the second line ("Grab Some Text") and change top line to read, "Start by Grabbing Some Text." This would likely expose the top of the text box in most browsers and further indicate to users the first step in magic making.

— Reply to this email directly or view it on GitHubhttps://github.com/chnm/serendipomatic/issues/119#issuecomment-22585432 .

Scott Kleinman Professor of English Director, Center for the Digital Humanities California State University, Northridge

[mialondon]

The problem is that on some screens, the white space between the bottom of the glyphs and the 'Let's Get Started' text is big enough that all they see is what's in the image in the original post and they think that's the complete site. I guess it's harder now as some browsers hide scroll bars or people just don't notice them to see that there's more to see further down, and perhaps because people heard about it as a new project they weren't surprised to see something that could just be a holding page. It's a classic 'below the fold' problem, which is ironic because we're not generally meant to see them anymore!

So what happens immediately below isn't as important as finding a visual element that somehow draws their eye down the page.

[fontnerd]

another idea.. not sure about it but would like some thoughts/ feedback....too obtrusive?

[mialondon]

Hmm, it's more that it upsets the lovely rhythm you had on the page by adding visual weight further out. Would just getting rid of the horizontal rule help? We could test it on a bunch of laptops/tablets and see if people get a hint of the text below or if it ends in whitespace.

[rpalin]

Like Mia, I prefer the balance of the original design and would be interested in seeing the page w/o the horizontal rule. Maybe also consider Scott's language and reduce the start prompt to one line, possibly in the color and font size of the existing "Grab Some Text"?

[scottkleinman]

I like the image, but I agree with Mia. I thought of making it a fourth icon, but I'm not sure that's much better.

You may not have noticed, but I squished the white space around the horizontal rule considerably. We could try removing it, but I'm not sure it would get us much more real estate.

On 14 August 2013 09:22, Mia notifications@github.com wrote:

Hmm, it's more that it upsets the lovely rhythm you had on the page by adding visual weight further out. Would just getting rid of the horizontal rule help? We could test it on a bunch of laptops/tablets and see if people get a hint of the text below or if it ends in whitespace.

— Reply to this email directly or view it on GitHubhttps://github.com/chnm/serendipomatic/issues/119#issuecomment-22647730 .

Scott Kleinman Professor of English Director, Center for the Digital Humanities California State University, Northridge

[scottkleinman]

Some other options that occurred to me:

1. Shrink the Serendip-o-matic and/or icon images slightly.
2. Move the icons up slightly.
3. Space the icons slightly further apart and/or shorten the text so that it falls on two lines.
4. In case the idea was forgotten, add a "Try It" menu button.

On 14 August 2013 09:49, rpalin notifications@github.com wrote:

Like Mia, I prefer the balance of the original design and would be interested in seeing the page w/o the horizontal rule. Maybe also consider Scott's language and reduce the start prompt to one line, possibly in the color and font size of the existing "Grab Some Text"?

— Reply to this email directly or view it on GitHubhttps://github.com/chnm/serendipomatic/issues/119#issuecomment-22649595 .

Scott Kleinman Professor of English Director, Center for the Digital Humanities California State University, Northridge

[fontnerd]

I definitely agree that my idea isn't the solution and I much prefer removing some element than adding more. Mia, your idea of removing the horizontal rule (or maybe adding it below "let's get started") is interesting.

On Wed, Aug 14, 2013 at 1:04 PM, scottkleinman notifications@github.comwrote:

Some other options that occurred to me:

1. Shrink the Serendip-o-matic and/or icon images slightly.
2. Move the icons up slightly.
3. Space the icons slightly further apart and/or shorten the text so that it falls on two lines.
4. In case the idea was forgotten, add a "Try It" menu button.

On 14 August 2013 09:49, rpalin notifications@github.com wrote:

Like Mia, I prefer the balance of the original design and would be interested in seeing the page w/o the horizontal rule. Maybe also consider Scott's language and reduce the start prompt to one line, possibly in the color and font size of the existing "Grab Some Text"?

— Reply to this email directly or view it on GitHub< https://github.com/chnm/serendipomatic/issues/119#issuecomment-22649595> .

Scott Kleinman Professor of English Director, Center for the Digital Humanities California State University, Northridge

— Reply to this email directly or view it on GitHubhttps://github.com/chnm/serendipomatic/issues/119#issuecomment-22650657 .

[mialondon]

Just a quick note (as it'll be good for future design documentation) that we'd discussed the role of the two coloured lines with Amy and team leaders and concluded that they each play an important design and UX role...

@fontnerd - thank you for your patience with us non-designers chipping in!

[scottkleinman]

I've removed the horizontal rule so that people can see the result. It should hit the dev server soon...

On 14 August 2013 10:37, Mia notifications@github.com wrote:

Just a quick note (as it'll be good for future design documentation) that we'd discussed the role of the two coloured lines with Amy and team leaders and concluded that they each play an important design and UX role...

@fontnerd https://github.com/fontnerd - thank you for your patience with us non-designers chipping in!

— Reply to this email directly or view it on GitHubhttps://github.com/chnm/serendipomatic/issues/119#issuecomment-22652950 .

Scott Kleinman Professor of English Director, Center for the Digital Humanities California State University, Northridge

[fontnerd]

Scott, I like your idea, here's my riff on it.

Maybe if the "let's get started" felt as if it were part of the header, it would feel a bit less cramped?

[fontnerd]

also, I know the Zotero box alignment is a bit messed up in this screenshot so please dis regard it...

[rpalin]

I had an interesting interaction on Friday: Someone who saw the Serendipomatic story I put on my school's website said that she wanted to try it but couldn't log-in. I of course told her that she needn't use Zotero and that all she needed to do was grab some text and paste it in the box.

I know that this is one simple user experience and I know that Mia has pointed out that the team sees importance in two colors and two lines. But, at the risk of annoying everyone, I'd like to again mention that one simple line might work for space and also perhaps for UI purposes.

A while ago, Scott had mentioned these single-line possibilities, which I like: "Start by Grabbing Some Text and Pasting It Below". If that's too long, he also proposed "Grab Some Text and Paste It Below".

Feel free to ignore this, if you're tired of this suggestion.

[mialondon]

Thanks for the feedback, Ray! I suspect that's more to do with making the 'or' clear - either add text, or, if you have a Zotero account, try that... (That's why I'd originally had it below the text box, though obviously that's a clumsy solution)

[fontnerd]

Does my previous suggestion get at @rpalin 's concern at all?

The point being: make the "Grab some text" more prominent?

[mialondon]

I'm going to start another issue for the 'confusion in call to action' issue so we don't get ourselves in a muddle... See https://github.com/chnm/serendipomatic/issues/143 for 'Front page 'get started' call to action'.

And for the original issue, I think that the current dev version - which I think has just the horizontal line removed, thanks to @scottkleinman - addresses my original concern, but I like the retro feel of @fontnerd 's treatment of the rule above. So I'm happy either way.

[mialondon]

At some future time @fontnerd 's last design would be great but for now I think my original issue has been addressed by @scottkleinman 's removal of the horizontal rule and tightening the white space.