-
Notifications
You must be signed in to change notification settings - Fork 82
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
UI Best Practices #2411
Comments
Lesson Development Checklist
|
Tutorial/Lessons Review ChecklistPlease tick all items you've confirmed:
Leave an additional comment below with feedback. You can also share what you liked about this Tutorial. This is great. Everyone should watch this!!
|
Tutorial/Lessons Review ChecklistPlease tick all items you've confirmed:
Leave an additional comment below with feedback. You can also share what you liked about this Tutorial. @jonathanbossenger I thought this was a good intro to a broad topic. Only a couple bits of feedback for me...
A good reminder of keeping the end user in mind when building sites. |
@rosswintle thanks for the review
They actually are underlined when you hover over them, because they're all links in the footer menu, vs links in any other content, were it's possible to confuse regular text with a link. So maybe a bad example on my part. I'll re-record that section using a better example.
Yeah, I was actually thinking about that when I watched the final video, I decided if someone requested I'll add it, so here we are 😁 |
@quitevisible thanks for the review
Not at the moment, but I could certainly see how this would be useful. During the process of creating the lessons in this pathway, @cynthianorman and I have already discussed a possible next "Advanced Theme Developer" learning pathway, with more content like what you have described. Once this learning pathway is published, we'll probably start gathering thoughts/ideas around what to include in such a "next level" series of content. Is this perhaps sometime you would like to help us work on fleshing out?
UI and UX are often used interchangeably, but that's because the UI affects the UX directly 😃 As discussed above, I can see a future where we have an entire module or series of modules specifically focused on UI and UX when developing themes. For now though, to get these initial developer pathways published, we're focusing on the high level ideas. But as I said, I can definitely see down the line were we really dive deeper and deeper into certain topics (for example I can't wait to do a deep dive into REST API things 😁) |
Updated video 02-User.Interface.Best.Practices.mp4 |
Tutorial/Lessons Review Checklist
Love the focus on a11y-related content here, @jonathanbossenger :-) However, in that context, there are two recommendations mentioned in the lesson, which may be controversial:
|
Hi @ironnysh thanks for the review. I'm interested to know why you feel they may be controversial. As far as I can tell, the lesson doesn't guide the learner to do anything that goes against the guidelines you've shared. |
Hey @jonathanbossenger, I probably shouldn't have grouped both under a11y, sorry. So, placeholders are tricky from both usability and accessibility perspectives. Here are two resources that explain the cons: However,
|
Thanks for the reading material. Placeholders: correct me if I'm wrong here, but in reading these links, its not specifically a case of "don't use placeholders at all" its more a case of "don't use placeholders without labels" and "don't use placeholders incorrectly" In the lesson it specifically states Would you agree this is inline with the suggested methods from those articles? Visited: Is your concern here that because the lesson doesn't specifically give guidance on what one should do, folks will come away thinking they can do the weird hacks you've discussed? Most of the content of this lesson comes from the [UI Best Practices](UI Best Practices) page in the theme developer handbook, so if we're going to recommend something other than what's on that page, we probably need to get that page updated first. |
Placeholders: actually, both sources have a similar bottom line: avoid placeholders when possible, and if you must use them, do it properly. Visited: that, too :-) I think that styling visited links isn't as clear-cut as the other topics covered in the lesson. It's probably the only UI/UX-related item here, while the rest are accessibility “musts”. Arguably, the UI Best Practices is a bit of a misnomer. UI is more than accessibility. |
@ironnysh understood. How does this sound as an update to these sections: Placeholders
VisitedInstead of this line
Replace it with this.
|
Placeholders: perfect! Visited: honestly, I'd leave this topic out and talk about visual hierarchy instead. It's “hard core” UI/UX, references color, and has much more impact. Some background: using a different color for visited links is still a convention, but much less common than it was back in 2004, when Jakob Nielsen wrote his famous article. It's really about context: what makes sense for a bibliography, doesn't apply when you're designing a landing page. Know what I mean? |
Gotcha. Are you ok with then just removing this line
From that section, and leaving the rest? |
Deal! 😄 Thanks for your patience and openness, @jonathanbossenger! |
Always happy to learn and help improve our learn content, thank you for sharing your insights and experience. |
Details
Learning Objectives
Related Resources and Other Notes
Automation Code
//lesson
The text was updated successfully, but these errors were encountered: