Design questions / edits

alykat commented 3 years ago

Resource links:

Dotted link underlines feel busy / hard to read on top of busy backgrounds
Should the links be yellow?
The mix of center + left alignment feels a little busy. One idea: no circles, centered text, bold/yellow links

Resolution: bold, white, solid underline

alykat commented 3 years ago

Chapter titles: Flip order of media indicator and autoplay button. (hierarchy: title/subhed/media type are all descriptors. the toggle button is an action)

alykat commented 3 years ago

Chapter titles: Is the autoplay toggle too prominent? We want folks to be aware they can change the setting, but we don't necessarily need to compel them to do so.

Resolution: Drop the border?

alykat commented 3 years ago

We have a lot of button styles. Can any of these be simplified / unified?

alykat commented 3 years ago

i'm struggling a little with the audio controls in ASMR. impressions:

the experience of this chapter would be a lot better if there was a way to autoplay the audio from the start (i know this is complicated)
on the first slide of the chapter, i didn't realize the audio was actually on b/c the volume is so soft. i toggled it on and off a couple times until i heard something.
the sound on/off labels indicate the current audio status, not descriptive of what happens if you click the button
if you've engaged autoplay, should emily's audio also autoplay?

resolution: will adjust language on the video buttons ("sound enabled / sound muted"). other stuff may be too complicated to do. (can be pulled out as enhancements.)

alykat commented 3 years ago

we have global controls in the top menu for autoplay video and show captions, but we only feature the video toggle in the chapter title screens.

alykat commented 3 years ago

Text links on "about" page use bold and a thick dash underline

but the ones on the reference boxes use dotted underlines and light text

alykat commented 3 years ago

On ASMR on mobile, the videos at the end overlap the control buttons. Unless I hit the edge of the screen just right, this seems to prevent me from getting to the next screen until i've scrolled past the videos. (noted in iOS safari and in-app safari on an iPhone 12 mini)

alykat commented 3 years ago

On Anticipation on mobile, I'm noticing a white flash when i flip between a still frame and a video version of the same image, which disrupts the flow a little bit. Also the images aren't toned exactly the same — the photo seems a little darker?

http://stage-apps.npr.org/tragicomic-relief/#story=anticipation&page=3

http://stage-apps.npr.org/tragicomic-relief/#story=anticipation&page=7

alykat commented 3 years ago

Are our end-of-chapter videos too varied in content/style?

alykat commented 3 years ago

Nature sounds: Should this have an "autoplay audio" option at the beginning (alongside autoplay video)?

alykat commented 3 years ago

Making art: On mobile the instruction text feels a little too tight to the edges.

File (1)

alykat commented 3 years ago

Less a bug and more a "huh that's interesting" observation re: "Making art" (and probably poetry):

If I save it from actual safari, I get a dialog box to save it to my photos.

If I save my image from in-app safari (twitter), I'm first prompted to share it to Instagram (though I can click "more" to get to the system options to download it to my photos)

Image from iOS (1)

alykat commented 3 years ago

"About" text is a little tight to the edges on mobile. Also, given its length, I wonder if it might be more readable left-aligned?

File (2)

nprapps / science-of-joy

Design questions / edits #149