UI Best Practices

[jonathanbossenger]

Details

• Content type (Online Workshop, Lesson, Course, Tutorial, or Lesson Plan): Lesson
• Content title: UI Best Practices
• Topic description: An introduction to applying the basics of good user interface design when developing a theme, as well as some best practices to follow.
• Audience (User, Developer, Designer, Contributor, etc.): Developer
• Experience Level (Beginner, Intermediate, Advanced, Any): Intermediate

Learning Objectives

• Describe what user interface design is, and how it's applied to theme development
• Explain some common UI design best practices with examples.

Related Resources and Other Notes

• https://developer.wordpress.org/themes/advanced-topics/ui-best-practices/

Automation Code

//lesson

[github-actions[bot]]

Lesson Development Checklist

• [x] Gather any relevant links to Support, Docs, or related material
• [x] Description and Objectives finalized
• [x] Lesson created and announced to the team for review
• [x] Lesson reviewed
• [ ] Lesson video submitted and published to WPTV
• [ ] Lesson created on Learn.WordPress.org
• [ ] Lesson video published to YouTube
• [ ] Lesson on Learn.WordPress.org updated with YouTube video
• [ ] Lesson published to Learn.WordPress.org

[jonathanbossenger]

Script: https://github.com/jonathanbossenger/wp-content/blob/main/theme-developer-learning-pathway/07-advanced-theme-development/02-user-interface-best-practices.md

[jonathanbossenger]

Video for review: https://github.com/WordPress/Learn/assets/180629/3f39a751-71cd-4286-8c44-035c5b20007e

[rosswintle]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• [x] Learning outcomes/objectives are clear.
• [x] Technical concepts introduced in the content are accurate.
• [x] The speed of demonstrations are easy to follow.
• [x] The narration audio matches what is shown visually.
• [x] Spelling and grammar are correct.
• [x] Sound quality is consistent throughout the video.
• [x] Brand Usage Guidelines and Promotional Guidelines are being followed.
• [x] Media assets are all in the public domain (CC0).

Leave an additional comment below with feedback. You can also share what you liked about this Tutorial.

This is great. Everyone should watch this!!

• [Optional] At 0:53 you mention "loss of potential customers". Not all sites are selling something so perhaps this phrase needs to be changed? You could include terms like "supporters" and "readers", or use something more generic like "visitors".
• [Optional] At around 2:34 you talk about how links should be underlined, but then all of the footer links above the link you are focussing on are not underlined. Are some kinds of links exempt from this? Should this be explained?
• [Optional, but preferred] I'd like slides to break up the topics. The transition from font-sizes to form field labels at 05:28 is particularly odd, it feels like you haven't changed topic.

[quitevisible]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• [x] Learning outcomes/objectives are clear.
• [x] Technical concepts introduced in the content are accurate.
• [x] The speed of demonstrations are easy to follow.
• [x] The narration audio matches what is shown visually.
• [x] Spelling and grammar are correct.
• [x] Sound quality is consistent throughout the video.
• [x] Brand Usage Guidelines and Promotional Guidelines are being followed.
• [ ] Media assets are all in the public domain (CC0).

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...

• Are there plans to break this down into 2-3 parts to cover other UI topics like navigation, personas, SEO, and mobile screens?
• In the first slide of bullet points, would it be helpful to show the User Experience acronym (UX) in the fourth point, as (UI) is shown in the first point?
• Relative to above, perhaps provide a brief explanation of difference between UI and UX, which are often used interchangeably (I think).

A good reminder of keeping the end user in mind when building sites.

[jonathanbossenger]

@rosswintle thanks for the review

[Optional] At around 2:34 you talk about how links should be underlined, but then all of the footer links above the link you are focussing on are not underlined. Are some kinds of links exempt from this? Should this be explained?

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.

[Optional, but preferred] I'd like slides to break up the topics. The transition from font-sizes to form field labels at 05:28 is particularly odd, it feels like you haven't changed topic.

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 😁

[jonathanbossenger]

@quitevisible thanks for the review

Are there plans to break this down into 2-3 parts to cover other UI topics like navigation, personas, SEO, and mobile screens?

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?

In the first slide of bullet points, would it be helpful to show the User Experience acronym (UX) in the fourth point, as (UI) is shown in the first point? Relative to above, perhaps provide a brief explanation of difference between UI and UX, which are often used interchangeably (I think).

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 😁)

[jonathanbossenger]

Updated video

https://github.com/WordPress/Learn/assets/180629/29afc95a-791d-4ecc-809e-b15c5530f678

[ironnysh]

Tutorial/Lessons Review Checklist

• [x] Learning outcomes/objectives are clear.
• [ ] Technical concepts introduced in the content are accurate.
• [x] The speed of demonstrations are easy to follow.
• [x] The narration audio matches what is shown visually.
• [x] Spelling and grammar are correct.
• [x] Sound quality is consistent throughout the video.
• [ ] Brand Usage Guidelines and Promotional Guidelines are being followed.
• [ ] Media assets are all in the public domain (CC0).

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:

• Styling visited links (at 3:23): see Privacy and the :visited selector - CSS: Cascading Style Sheets | MDN
• Using placeholders in forms (at 6:14): see HTML attribute: placeholder - HTML: HyperText Markup Language | MDN

[jonathanbossenger]

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.

[ironnysh]

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:

• Don’t Use The Placeholder Attribute
• The Anatomy of Accessible Forms: The Problem with Placeholders

However, :visited is more about

• The usability/readability: having multiple colors/styles inside a body of text.
• The privacy restrictions limit which styles you can apply, which sometimes drive people to implement weird hacks.

[jonathanbossenger]

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 Where possible, add placeholder text to input elements. Placeholder text shows the user an example of what to type. and Use placeholders to suggest the type of data a field requires, and not as a substitute for the field label.

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.

[ironnysh]

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.

[jonathanbossenger]

@ironnysh understood. How does this sound as an update to these sections:

Placeholders

Theme developers will often use placeholders on input elements to show the user an example of what to type. However, when done incorrectly, placeholders can be a user experience and accessibility nightmare. So make sure to use placeholders correctly, or not at all.

If you do decide to use a placeholder, make sure that it suggests the type of data a field requires, and not as a substitute for the field label.

Visited

Instead of this line

A good trick for taking the guess work out of visited links is to color them 10%-20% darker than the unvisited links.

Replace it with this.

Ideally, you should leave the default visited and unvisited link colors as is. If you do decide to change them, the visited links should ideally be at least 10%-20% darker than the unvisited links.

[ironnysh]

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?

[jonathanbossenger]

Gotcha. Are you ok with then just removing this line

A good trick for taking the guess work out of visited links is to color them 10%-20% darker than the unvisited links.

From that section, and leaving the rest?

[ironnysh]

Deal! 😄

Thanks for your patience and openness, @jonathanbossenger!

[jonathanbossenger]

Always happy to learn and help improve our learn content, thank you for sharing your insights and experience.

[jonathanbossenger]

https://wordpress.tv/2024/05/24/user-interface-best-practices-in-theme-development/

[jonathanbossenger]

https://youtu.be/iWi4qqtz7Bs

[jonathanbossenger]

https://learn.wordpress.org/lesson/ui-best-practices/