Feedback on mobile-app UI as of commit d4148926cc.

[kfogel]

This is feedback on the currently-mobile-UI-only Wabash Arts Corridor demo Arches App. However, most of this feedback is not specific to screen size and will apply just as much to the upcoming desktop version of the app.

This feedback corresponds to this internal Zulip message.

I tested on a Google Pixel 7a, in both Firefox (nightly) and in the default Chrome browser that ships with Google's stock Android.

• Title at top: "Explore Chicago's Wabash Arts Corridor". #58

  Then put the current top intro text paragraph behind an "🛈" link or something. Justification: we shouldn't start out the site with big blob of text that drives all the action controls down such that they're not even initially visible on the landing screen.

  Also, if we are quoting something, then we should cite it. I think the text we have comes from an old version of https://students.colum.edu/deps/wabash-arts-corridor, that was snapshotted by Google and attributed to the alias link https://wabashartscorridor.org/page/2/ (which is a 404 these days, but top-level https://wabashartscorridor.org/ redirects to https://students.colum.edu/deps/wabash-arts-corridor).

  Feel free to use/remix the more up-to-date text from the new site (or I can do so if you'd prefer).

• Remove the text "Explore the artwork geographically". The map+pins signify that well enough that no explanation is needed.

• Remove the text "Explore the artwork as a list". #59

• Make initial map taller, so pins aren't so squished together. The Wabash Arts Corridor runs mostly North<->South :-). #60

• For "No image available", use gray background (see PR #32).

• Instead of "Everything Artists Artworks Photographers Structures" above the search box, just have "Artworks Artists" as the only two choices, with "Artworks" selected as the default.

• Then for the placeholder text inside the search box, have "Search artwork titles and artist names..." #61

• When crediting the photographer (e.g., under the image, on a specific artwork's result page), don't link to the photographer as an entity. Just have "Photographer: Rose McGowan" with a colon but no link (well, obviously use whatever the entity's name is, but as of right now all the photos are taken by Rose McGowan).

• Also on a specific result page, typographically distinguish the label "WAC Description" from the actual description text by making the latter italic (as well as in double quotes, which it already is). If you think some other way of distinguishing works better than italicizing, then try that -- I'm just suggesting italicization as a default solution, but I'm not wedded to it.

• For the "Arches metadata": put a colon after that, then underneath, indent the metadata (not textual indent, but rather I mean move the whole box's left edge over a bit to the right, so that even the continuation lines of long UUIDs are still indented).

• When I click on an address, I expected that to do something on the map, like zoom me in to that address, as well as showing what Artwork is there. But nothing happens on the map. Can we connect address links to appropriate map actions? (This feedback item may be non-trivial and require some discussion -- let me know.)

• Clarify resource type in search list #73

• Also in the text for each result, include the address where the artwork is located (that is, the artwork whose image is being shown, or whose image would be shown but for "no image available"). Likewise, distinguish this address text typographically and spatially from the

• Introduce Client Side Routing #57

  Then I hit my browser's Back button to go back to the front page, but that didn't work -- instead it took me to the page I'd been on before I went to the WAC demo app in the first place. (So then I used the browser's Forward button to go back to the search result, and I saw the "Back to search" link and used that... but people are going to use their Back button reflexively, so that has to Just Work.)

• For the "About / Credit" text at the bottom (I haven't tested this HTML, so please fix as needed):

    <p>This site is a project of <a
    href="https://opentechstrategies.com/" >Open Tech Strategies,
    LLC</a>.  Our thanks to the artists and curators who created and
    continue to build the <a
    href="https://students.colum.edu/deps/wabash-arts-corridor"
    >Wabash Arts Corridor</a> in Chicago.  Please write us at
    [email protected] to suggest changes or improvements
    to this site.</p>
  
    <p>This site is <a href="SEE_BELOW" >free &amp; open source
    software</a>, based on the <a href="https://www.archesproject.org/"
    >Arches</a> heritage data management platform.</p>
  

  That "SEE_BELOW" link should link to a "/technical-info" page that has the following content:

    <p>This site is free &amp; open source software.  See the <a 
    href="https://github.com/OpenTechStrategies/arches-app-exp"
    >application code</a>, the <a
    href="https://code.librehq.com/ots/arches/arches-demo-data/-/tree/main/wac"
    >data</a>, and our <a
    href="https://code.librehq.com/ots/arches/arches-sites/-/tree/main/ots/wac"
    >data import scripts</a>.  Contributions welcome.</p>
  

  Did I get all the above URLs right? Please correct if any are wrong, and let me know of course.

[jamesvasile]

I think it is broken for me. It looks like a site that loaded but the css didn't come through. I don't see any 400-499 html responses except 404 on a font (https://arches-app-demo.opentechstrategies.com/assets/Inter-VariableFont_opsz_wght-c8O0ljhh.ttf) and a favicon.

[hminsky2002]

@jvasile this is the mobile layout only, following @reefdog's mobile layout design

It should translate a good amount better if you reduce your window size to a mobile panel, working on the desktop layout now, will ping when that is merged!

[jamesvasile]

Looking at it on my phone, it looks much better!  I really like being able to scroll through the pictures.  It is simple and usable.

My feedback is a pile of small things:

• I feel like we need some kind of logo/banner/hero.

• Is the white background too white?

• The map is too small to be usable and is also unresponsive to input.  Oh, if I click the + button it expands and becomes usable?  But I dIdn't realize that until I randomly clicked on it all over, which isn't really the user journey we want to require.  Can it be activated on any click anywhere in the map? 

• On firefox on my tablet (Samsung S7 Plus), the map is inconsistent.  I got it to expand once, but on reload, no matter where I click on it, I get no response.  Oh that lack of response appears on my phone and desktop too, both in ffox and chrome.  Not sure what's going on.

• I cannot tell if the map view updates to match the search items or the selected items in any way, but it should.

• I wonder if the categories need descriptions.  In particular, I wonder what a "Structure" is.

• If I click on an artist, I see info about them, but then the back button leaves the page.  I feel like it should take me back to the larger list of artists or whatever.  If I click on an artist, then their work, back should take me back to the artist view.  I know these aren't really pages, but back should have familiar semantics.

• When I click on internal links, the url doesn't update. If I want to send a link to a specific artist's page to a friend, the first place I would look is the url bar. It should update as users move forward and back in the app.

• There seems to be too  little visual differentiation in elements.  "Back to search" is a button but isn't styled like anything.  Maybe use some background coloring to put items in boxes.  Each search item could be a card, for example.

• Why are we showing Arches Metadata?  That feels like it should be available but not visible by default.

• Dark mode is looking good.

• On a tablet in portrait mode, the search items are on the left and there is a ton of whitespace on the right.  It looks unbalanced.  If we do cards, they will take up some visual space to the right of the pictures, and that might help.

• If I am looking at a work, there is a "More artwork by" section that has... just the same piece of art.  I've been scammed!

• I wonder if a "random artwork" button would be interesting to have.

• Maybe a button to show somebody what works are in their area, with the map updating to suit?  We'd need location permission and have to be smart about choosing a distance, but why not?  This is a feature for when we have more works than just a bunch in a row in one corridor.

And finally, a bigger piece of feedback, which is less about design and more about vision.  The site is exactly what it should be today.  But tomorrow we can do better.  Today, the collection is neat, and you can walk through some links in the same way wikipedia affords.  That's cool, but it doesn't tell any stories.  There's no curation.  Its joy is all serendipitous (i.e. haphazard).  That's the thing I'd like to see change over time, because we won't engage users if we don't give them curated paths in.  The site right now is a reference work, but it eventually needs to be a coffee table book or a  comic book or a zine.

All in all: well done on the design.  This is tremendous progress.

[kfogel]

+1 to James's point about future direction, btw -- I agree, we eventually to get somewhere that is more like a coffee table book or a comic book or a zine. But just getting to a clean, uncurated, neutral reference site today is great.