Phone800.366.3472 SupportGet Support DocumentationDocumentation Resource CenterResource Center
search
close
Open Menu

Synergex Blog


When is a page not a page? And when should it act like one?

By Liz Wilson, Posted on February 12, 2021 at 11:30 am

Liz Wilson

The Synergy developer interested in RESTful web services may have noticed a few intriguing things about this liminal era between Web 2.0 and Web 3.0. For starters, a page refresh is not guaranteed each time you navigate to some new corner of a website or app. When it comes to the “traditional” concerns of HTML, Javascript, and CSS—despite what The Offspring may claim—you no longer have to keep ‘em separated. The list of ways that frameworks like Vue, React, and Angular have changed both user and developer experience is extensive, and taken together, all these changes allow for unique and dynamic websites and applications.

That said, while innovation has the potential to take us further from the traditional experience of clicking a link and waiting for a new page to load, there are a few characteristics of those webpages from the early 2000s that the front-end folks would be amiss to innovate away from. Here are just a few!

1. Specific, Descriptive Title Elements

The HTML title element, demarcated by the <title> tag, is meant to provide a succinct description of the document that the browser has just rendered. If you are one of those people who has anywhere from 5 to 50 browser tabs open at any given moment, you probably rely heavily on page titles, as they appear in the tab next to the site’s custom icon.

A specific and descriptive page title is not just beneficial for compulsive tab openers like me, however. Unique titles with more, rather than less, information can improve the search engine optimization of your site. Additionally, page titles are often the first component that screen reader users will refer to in establishing where they are in a site. So adding a company name next to “Home” or “About Us” is a helpful enhancement, as is including information about changes to the page’s state.

For example:

<title>Error – password invalid – Acme Corp: Login</title>

The title element lives with other metadata in the “head” of the document, so it’s not displayed on the page and is therefore relatively easy to neglect. And when you’re working with tools like Angular and React to create single-page applications, you’ll find yourself with one HTML file in your project folder, which means just one <head> section where a title element would obviously be placed. Fortunately, most of these frameworks and libraries have developed tools for generating dynamic page titles.

ASP.NET Core Razor Pages

To ensure that your page titles are being updated dynamically, use the ViewData attribute either in the page’s model (as demonstrated in the documentation) or its .cshtml file. In either case, make sure that if you use Layout, the title element is reading from the ViewData dictionary. If you follow the standard instructions for creating a Razor Pages web application, this is the code you will see in the _Layout.cshtml file:

React

For a similar effect in your React app, install the React Helmet node package. Once that’s done, it’s a simple matter of importing Helmet and adding the document head information within <Helmet> tags within components as needed.

Angular

Similar to React, Angular projects contain a single index.html file, and that’s it for documents with the traditional head/body structure. Angular’s data binding can’t access anything outside of the body tag, so in order to display different titles as the user navigates around the app, you need to use the Title service, which is a very simple class consisting of two methods: getTitle() and setTitle(). The Angular documentation provides clear examples of how to incorporate this class into your application.

2. Semantic/Logical Headings

Whether your site is built with HTML and “vanilla” JavaScript or the client-side framework your cousin’s cousin created last week, at the end of the day, a document object model will be created by the web browser from HTML—whether that HTML was manually written by you or not. The DOM is a cross-platform interface that represents HTML as a tree structure by organizing all the markup’s elements, attributes, and text nodes into objects and creating a logical hierarchy from these objects. The technology was developed in the early days of JavaScript to enable client-side interactivity, and nowadays, the DOM also serves as the foundation for the browser’s accessibility tree, which is a critical layer that allows screen readers and other assistive technology to make sense of the contents of a website. Objects within an accessibility tree contain information ranging from what the specific element is (e.g., heading, input, etc.) to whether the element has a state (e.g., checked or unchecked, collapsed or expanded).

With that in mind, while current design trends indicate that the amount of text on each page remains in decline, it’s still a good idea to create a logical hierarchy of information and use different heading elements accordingly. This will not only benefit assistive technology users, but also the large swaths of us who have been conditioned to look for a big ol’ heading in a prominent position on the page. So even if the page is not technically a page, make sure the main heading is contained in a heading tag (probably an <h1> or <h2>) and the information that is less important is organized under the subordinate heading levels (<h2>, <h3>, <h4>…).

3. Logical Focus Order

In the same way that you may need to apply more thought with new web architectures, it’s very likely that you will have to expend some amount of effort to manage keyboard focus to replicate the way that focus operates in regular old HTML documents. In a traditional website (barring questionable use of CSS), a keyboard user can tab through each page in such a way that mimics the visual flow of information: left to right, top to bottom. In a single-page application where new HTML documents are not actually being loaded in the browser, there is nothing that would necessarily prompt keyboard focus to jump to an element at the top of a new page, because there is no new page. The Angular website (built, naturally, with Angular) provides us with an example of this. If you tab to the footer section from Home and select About, rather than hopping up to something intuitive, like the links at the top of that “page,” your next tab will take you to the next item in the list of footer links.

There are other potential issues relating to mutable content, including focus effectively disappearing, or users getting shot back up to the top of a section if a button is replaced by some other UI component.

Again, today’s popular libraries and frameworks propose techniques for providing a good experience for keyboard users:

To conclude, there is no reason for the not-pages that make up your single-page application to look like they were built in 2006. However, a case can be made for ensuring that certain aspects of the early web experience are not thrown away with the bathwater.1


1The bathwater consists of jQuery, Flash, and frames.


I’d Like Some Information with that Information, Please

By Liz Wilson, Posted on October 29, 2020 at 5:16 pm

Liz Wilson

I started using Microsoft Teams daily when I was hired by Synergex back in May. While there were some features of the user interface (UI) that took a bit longer to master, I was able to discern most of what Teams was telling me about the status of my coworkers immediately. I looked at the green dot and intuited its meaning as “Available,” and by a similar process, came to the correct conclusion that red communicates the opposite state.

My general comfort level with user statuses in Teams is due to the design pattern that this UI component follows: the placement of a status icon next to, or partially on top of, the user icon. I’m a millennial, so I was exposed to this pattern early on via AOL Instant Messenger and saw it again in a more sophisticated form when Skype started its ascent to mass popularity during the early aughts.

Design patterns are powerful because they provide users with context. The widgets and components of an application that follows design patterns are immediately imbued with meaning by the user, while a layout that shuns convention risks a discouraging and confusing user experience. For example, the “infinite scroll” design trend, while still used in social media feeds, has fallen out of favor in the context of website landing pages, partially because visitors expect to arrive at a footer and don’t enjoy finding themselves lost in an unorganized (and data-intensive) sea of content.  

Context-Independent Components

There is, however, a limit to what users can understand about your application using background information gleaned from previous experience. To create a comprehensible and easy-to-navigate UI, components should provide enough information about themselves to make sense regardless of the varying expectations and abilities users bring to the table (i.e., the context from which someone is accessing your application). In regard to my earlier anecdote, I made the correct assumption about the green, yellow, and red dots in Teams right away. On the other hand, there was one status icon that meant nothing to me at first, as it resembled a sideways magenta jellyfish. Thankfully, in anticipation of this type of ambiguity, as well as the very real possibility that some Teams users may be color blind1, Microsoft included a description of each status in the tooltip, so by simply hovering over the magenta jellyfish, I learned that a) it was not, in fact, a jellyfish and b) it was the “out of office” symbol. Mystery solved.

It doesn’t take a visual impairment (or cluelessness, in my case) for accessibility issues to arise, just a lack of information about information. Take abbreviations, for example. New employees may not be familiar with the acronyms that populate the tabs and menus of your application. By providing a mechanism for identifying the full meaning of abbreviations and acronyms in the user interface, you’re lowering barriers to accessibility. This strategy is discussed in the Web Content Accessibility Guidelines and applies to mobile, web-based, and desktop applications, as well as traditional websites. Form validation is another area where a “more is more” approach to information is appropriate. I can’t count the number of times I’ve submitted a form and the only indication I’ve received that something isn’t right is a grayed-out submit button. Often it takes several trial-and-error attempts before I realize that the form wants me to format my date differently or add punctuation to a new password. In this situation, technically speaking, I’m receiving just enough information to have a sense of what’s going on, but not nearly enough to make an informed decision about what the application wants me to do next. Designers and UI developers can inject extra information into each field to guide people towards correct formatting and data types, the result being that users can successfully submit a form regardless of the context they’re working in (vision impairment, device dimensions, etc.). On a related note, individuals who use a mouse to navigate and fill out forms can see where the pointer has landed and enter data accordingly, so to provide a comparable experience to keyboard users, you can highlight form fields with a border as they receive focus. Once again, the WCAG website outlines this technique in greater detail.

There are hundreds of additional scenarios where context-independent components would enhance user experience, so rather than attempting to list them all here, I’ll recommend checking out Microsoft’s Accessibility Insights, an application and browser extension created to help developers make their applications as accessible as possible. The tool is open source, free, and available on Windows, MacOS, and Linux.


[1] According to the National Eye Institute, approximately 1 in 12 men are color blind.


5 Strategies for Creating Educational Content that Customers Will Use

By Heather Sula and Jacklin Garcia, Posted on October 22, 2020 at 3:05 pm

Heather Sula and Jacklin Garcia

The scenario: You and your team of fellow genius software developers have created a great application. It’s been out in the wild with customers using it and loving it, but they have questions and aren’t quite getting what they need from your documentation and release notes, and your support team is always bogged down with the same questions. So how can you educate your customers to help them get the most out of your product?

Talk to Support

As a developer, you have strong ideas about how people should be using your product. However, people are people, and they’re going to take what’s in front of them and do all kinds of things you never expected. That’s where your support team comes in. (Note: If you’re with a small company and you ARE the support team, find a way to keep track of this stuff, if you’re not already.) Support is on the front lines—they’re an infinite well of knowledge when it comes to the ways people are actually using your products and their problem areas. If your support reps are using some sort of case management system (we use Salesforce Service Cloud), they can easily pull reports of bugs reported or questions asked by product or release version to get you the information you need quickly. Plus, if you can convince support that these educational resources mean people will be able to do “self-serve” support and free up more of their time, they’ll be more than happy to get you whatever you need. You can find out how helpful the Synergex support team is here

Get ideas straight from the source

Another avenue for figuring out your customers’ pain points is hearing directly from them, and there are a number of ways to do this. The most direct, of course, is the good old-fashioned direct conversation. Are you or your sales team reaching out to customers with any sort of frequency to see how they’re doing? You’d be surprised what a 15-minute conversation or direct email exchange can uncover. 
You can also create places for people to provide this information directly. Two ways to do this are surveys (some people loooove to give feedback) or a forum where customers can post their thoughts, ideas, and issues with your product. At Synergex, the latter is our Resource Center, and customers use it to air their thoughts and curate their wish list for new product features.

Work with Marketing

Now that you know the “What”—what questions you need to answer and what topics your customers are interested in—you need the “How.” That’s where marketing comes in. If your company has a marketing team, you may see them as the people who sometimes send out emails or edit your website, but marketing can be a valuable resource from the very beginning of this process through the end. They can help you create surveys, advertise your forum, or help create other ways for you to reach out to customers. They may bring a different perspective to help you identify useful areas of focus. They can put their creative powers to use, helping you create and brand your content. And, more importantly, they can help you get your educational product out there (more about that later). Feel free to pick our brains if you have questions.

Make it digestible, accessible, and fun

Sure, you have the dry (though they don’t need to be), dependable resources that come standard with software development: release notes, documentation, etc. But you’re a creature of the internet—you know how short attention spans are, even for detail-oriented, technical people like yourself. Plus, people learn in different ways, AND they need to hear the info multiple times before it sinks in, so providing information about your products in various formats can help accommodate those different learning styles. What you need is content that’s simple and quick to digest. 

Here are a few things we’ve had success with at Synergex:

YouTube videos/tutorials

Videos can be an extremely useful tool when wielded well. They’re a constant resource that your customers can revisit again and again, and they can save you and support from having to answer the same questions over and over and over again by simply linking to a video.

Cheat Sheets

At our company, we provide “cheat sheets” to our customers upon request—visually pleasing, easily readable single- or two-sided documents that contain commonly used statements or shortcuts our customers can use when building their product with our code. Materials like cheat sheets let customers feel like they’re in on a secret (which they are!) and like they’re getting more bang for their buck.

Webinars

Webinars are a great way to promote an idea or product you’d like your customers to know about, while also being a great educational resource for some of the more niche topics your customer may be curious about.

Accessibility

Have all of this information easily findable on your website. It would suck to spend all this time creating content only for people never to find it. We’ve made an effort to move most of our helpful content out into the open, like our Answers and Ideas forums, so you can see it without having to log into the Resource Center. Our KnowledgeBase will be the next component that we move from behind the curtain. Watch for an announcement about this soon. Bonus: If you have more information readily available, it lowers the adoption barrier for potential new customers. People are more likely to pull the trigger on a purchase if they see that you’re engaged and customer oriented with useful, easily accessible information about your product.

Cross-referencing

Remember how we said you need to repeat information multiple times before people retain it? One way to do that is to employ cross-referencing. You can link to your resources from other resources to reinforce your messages. For example, our quarterly Synergy-e-News newsletter links to blog posts and technical articles that we may have only promoted once but want to emphasize. And those tech articles and blog posts often link to our documentation, videos, tutorials, etc. Give your customers every opportunity to find your content by putting it in front of them more than once.

Fun

This stuff does NOT have to be as dry as your documentation (though we’ve been known to sneak in a few surprises there too). Have some fun with your educational materials, be informal, show you’re human. Your customers will have more fun too and potentially retain more.

Let people know about it

This is, again, where you may need to collaborate with your marketing team. They have all kinds of ideas and resources for getting information out to your customers (and potential customers), from emails, to ad campaigns, to social media, to website optimization, to standardized email signatures with links to resources, and more. AND they can make it aesthetically pleasing—never underestimate the appeal of content that looks, well, appealing. Find creative ways to let your customers know about all the great stuff you have for them, and they’ll be happier for it. 

What strategies do you use to educate your customers?

Education: It’s not just for customers

While this post focuses on external resources for customers, internal training and educational materials for employees are important too! Not sure how to start creating internal training materials for your developers or support representatives? Contact your Synergex account manager to learn about setting up a system assessment with our consulting department as a first step – our system assessments provide a documented architectural overview of your application, touching on relevant aspects of your overall business, which you can then turn around and use for your internal onboarding. 

Bottom line: get creative and collaborate. 


Don't miss a post!

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Recent Posts Categories Tag Cloud Archives