In the quote view, you’re going to find that full justification causes a lot of issues with variable content. Justified alignment can often result in large gaps between words and ”rivers” (https://en.wikipedia.org/wiki/River_(typography)). Hyphens can help, however at the size of the type on display in the mobile app, you could find yourself with a hyphen on every line. Until you are able to adapt the size of the type (and thus the measure of each line) based on the length of the quote, I think sticking with flush left alignment will best suit the nature of the content.
I haven’t been able to test this on desktop (can’t auth link yet), but I just want to make sure I mention that it’s important the buttons and fields are all accessible with proper aria attributes, labels, etc.
This is minor, but it feels odd that the author field is above the quote field when adding a quote, but inverted when presenting a quote. I would personally put the quote field first because it’s likely to be in my clipboard or the first thing I wish to add.
It would be nice to have a way to dismiss the “new quote” form if you decide against creating a new quote. On mobile, because it feels like a page view, I thought I could hit the back button, but that just took me back to the auth screen. Going forward again brought me to the “new quote” form again and the only way to dismiss it is to refresh the page.
The one feature I had hoped would be the “killer feature” of Quotational was the ability to share quotes with a URL (https://quotation.al/quotes/4085072396). My design for this page is no where near as nice as what you have, but I see a lot of value in making the pages for the quotes linkable, though I also understand that may not be in your vision of this app.
I really dig the direction this is taking and would love to see it continue to be developed. Great job, team!
@boris Perhaps I’m misunderstanding what is meant by “auth link between mobile and desktop web” or missing an obvious step like the total n00b I am but I’m not quite sure what to do to use the account I created on my iPhone on the MacBook
Actually, the arrow button does just that. When you click that, it’ll select a random quote you haven’t seen yet. Same thing happens when you load the app. Those numbers on the screen show how many you’ve seen and how many quotes you have. At least that’s the idea, haven’t tested it extensively yet
For sure, still need to tweak the mobile styles. Text is too big, needs more spacing on the side, etc. But yeah, sometimes justification looks nice, other times it doesn’t. Will try left alignment!
I’m not sure aria attributes are that important nowadays, but yeah, definitely need to invest time into accessibility. I really need to make, or look up, a checklist for launching an app/website
Oh, good point, will do
Makes sense, need to add some routes to this fella There is a button at the bottom which takes you back to the quote screen though. Altough, it might not be clear enough.
That’s on the todo list for sure Although I’m not entirely sure yet what form that’ll take, but we’ll see.
We’re missing some pieces in regards to our file system. Meaning, you can only load your file system on one app and one device/browser. Obviously this is not how it should work, but we’re getting there, soon!
Haha, me too! And, I suppose these also resemble the new hover states in macOS Big Sur (though I’m still stuck on Mojave due to a dependency on a 32-bit driver, but that’s another story). All of which to say this feels really modern and natural.
Ahhhh, that makes sense! That wasn’t what I thought was happening purely because the arrow suggests to me a particular linear order, but I can see how that is my personal bias.
That’s the one!
I promise this will be the last I harp Ensuring enough contrast is particularly important for people with vision impairments, including but not limited to colour blindness.
There are some really powerful tools available that help with this.
Contrast is a Mac app that lives in your Menu Bar and lets you pick two colours to get their contrast ratio.
Chrome Devtools also have a feature that lets you evaluate the contrast between two elements.
Stark is a plugin for Sketch, Photoshop, and Figma that does the same but also allows you to simulate various forms of colour-blindness by applying a filter overlay to your design.
I now don’t recall whether they were there yesterday or have been added since, but I now see you have labels above the fields which should be accessible by screen readers. However, you are missing the “for” attribute on the labels, and thus a screen reader like VoiceOver is unable to pick them up and instead read the text that’s in the placeholders. See the attached gif for reference (and forgive my sloppy clicking ):
There are a number of checklists available online. One you may find useful is WebAIM’s WCAG 2 Checklist which seeks to condense the WCAG 2.1 specification specifically for the purposes of implementation.
Ooooh, the quotation mark icon. Yeah, I did not guess that’s what that was.