It’s easy to think about a layout as being a primarily visual concern. The header goes up top, the sidebar is over here, the call to action is in an overlay on top of the content (just kidding). Grids, borders, spacing and color all portray valuable visual data, but if these hints to the structure of a page are only visible, some users may find your content unintelligible.

You can experience this first hand if you try using a screen reader on the web. When I fired up VoiceOver on my Mac and took it out for a test drive, I realized that to a screen reader user, a lot pages are just a big heap of ‘content’, missing helpful organizational cues.

The experience can be kind of like listening to a long rambling story without any indication to what details are important or related to the main thread of the story. Halfway through the story, you aren’t sure whether it’s worth it to keep listening because you don’t know if you’ll even find what it is you’re looking for.

In the context of a website, your screen reader might be halfway through reading you a list of 50 sidebar links when you start wondering if there is any valuable content on the site at all.

Experiences like this are caused by websites that are built with layouts that are only visual. Ideally, however, our visual layouts should point to an underlying organizational model of our content. They should be visual indicators for a conceptual model. The visual indicators are just one way of revealing this model. The Web Accessibility Initiative’s ARIA (Accessible Rich Internet Applications) project provides alternative indicators to users who may need them.

I’ll walk through how to make use of these indicators to make a simple web page easy to use, navigate and read for users of assistive technology. All the example code is available on Github.

Want to up your accessibility game? Checkout my free email course: 
 ✉️ Common accessibility mistakes and how to avoid them.

Initial Layout

Here’s an example of a page with a pretty simple layout. We’ve got a header at the top containing a logo and navigation, some body content, a sidebar off to the right with a related posts list and a list of social media sharing links, a search box below the content, and a footer containing the contact info of our business.

• Preview the initial layout
• View the HTML

Visually, the content is pretty well divided, using a simple grid and background colors to distinguish the different elements. If you fire up VoiceOver on this page, you can navigate through the page pretty well using the next element command. The order of elements in the markup pretty much follows the visual order of elements. First we read the header, then the body copy, then the sidebar, then the search box, then the footer. That’s pretty good. If I press CAPS + U to pull up the VoiceOver menus, I can get a list of all the headers on the page and all the links, and navigate directly to them.

Just by using well-structured HTML, simple grouping with <div> elements and a good use of heading tags we’ve got a decent experience. It’s better than the rambling story websites I mentioned above, but it could be even better.

• Preview the skip link layout
• View the HTML

First we’ll add a skip-link as the first item of the page. A skip link is a very common accessibility feature that allows users to skip past lengthy lists of links and other information repeated on every web page directly to the main content of the current page.

It’s a link that is the first element in the tab order of the page. It is typically visually hidden, but when focused, it appears on-screen. To visually hide the link, we’ll add the following CSS:

.skip { 
    clip: rect(1px, 1px, 1px, 1px); 
    position: absolute !important; 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } 

/* Display the link on focus. */ 
.skip:focus { 
    background-color: #fff; 
    border-radius: 3px; 
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 
    clip: auto !important; 
    color: #888; 
    display: block; 
    font-weight: bold; 
    height: auto; left: 5px; 
    line-height: normal; 
    padding: 15px 23px 14px; 
    text-decoration: none; 
    top: 5px; 
    width: auto; 
    z-index: 100000;
}

The link location of the skip link needs to be an id pointing to the main content of the page. In our case, I added id="main" to the <div class="content"> section and gave the skip link a url of href="#main".

If you visit the skip link page and hit your Tab key, the link should display. If you fire up VoiceOver and start navigating through the page, the skip link should be the first thing you come across, and clicking it should trigger VoiceOver to start reading the main content of the page.

WCAG Techniques Used

With this step, we’ve allowed users to skip straight to the meat of our page, but beyond easily accessing the main content, they still don’t have a good conceptual map of the rest of the page.

ARIA Roles and Landmarks

One way to provide users with a conceptual map of the page is by using semantic HTML5 elements like <header>, <nav>, <main>, <section>, and <aside>. These elements have built in data associated with them that is parsed by browsers and screen readers. They create landmarks on a web page. By using these elements judiciously in place of <div> elements, we can provide extra information to assistive technology devices and help the user build a conceptual map of our page.

I’ve maintained the same layout as before, but I’ve swapped some divs for some semantic HTML5 elements. I’ve also added a role attribute to the search component. Alternatively, you could keep all the divs and add a role instead of swapping them out for the new HTML5 elements. (See the w3 guidelines for ARIA roles)

• Preview the updated layout
• View the updated HTML

Here are the key changes:

• <div class="header"> becomes <header class="header">
• <div class="main-navigation"> becomes <nav class="main-navigation">
• <div class="content"> becomes <main class="content">
• <div class="sidebar"> becomes <aside class="sidebar">
• <div class="related-posts"> becomes <section class="related-posts">
• <div class="search"> becomes <div class="search" role="search">

Now when I fire up VoiceOver and press CAPS + U, I get a new Landmarks menu. Inside this menu you can see the following elements:

• banner
• navigation
• main
• complementary
• search
• content information

Selecting any of these menu items takes the user straight to that element, so they can easily navigate through the different elements of a page. If they are at the bottom of the page, they can easily get back to the main navigation in the header via the Landmarks menu.

WCAG Techniques Used

We’ve dramatically increased the navigability of our page and provided an initial map to our users, but we’re missing a few things to make this experience really awesome. First, the names of our site sections are fairly generic. We aren’t exactly sure just from listening to the menu what might be in any of the elements. Second, some elements aren’t easily navigable. For instance, our sidebar components are all grouped under the label ‘complementary’.

We can add some well-thought out ARIA labels to make this experience even better.

Using Appropriate ARIA Labels

By peppering in some ARIA labels we can give the user an even more detailed conceptual map of our layout.

• Preview the updated layout
• View the updated HTML

In this next iteration, I’ve added the following labels:

• <nav class="main-navigation"> now has an aria-label of Primary Navigation.
• <main class="content"> now has an aria-labelledby attribute of main-title and its <h1> has an id of main-title.
• <aside class="sidebar"> now has an aria-labelledby attribute of sidebar-title and its <h2> has an id of sidebar-title.
• Both <section> elements in the sidebar now have an appropriate ARIA label.

Let’s fire up VoiceOver again and pull up our Landmark menu with CAPS+U. Now we see that the ARIA labels we provided display next to each of our generic menu items. We also have a few extra menu items, because the <section> elements we provided labels for (Related Posts, Share Links), now have their own menu items.

Now an assistive technology user has an equal (and maybe even better) conceptual map of the content and actions they can take on this website compared to a non-assistive technology user. They can get a quick overview of everything on the site, easily navigate to the section of the page they want, and quickly find what they are looking for.

WCAG Techniques Used

• Landmarks
• Labelling Landmarks

Wrap Up

With a combination of well-structured HTML markup, thoughtful use of ARIA roles and a careful labeling of site sections using ARIA labels, we’re able to create a user experience for assistive technology users that rivals the experience of non-assistive technology users. We were able to take the conceptual map that was implicit in our visual layout and expose it to assistive technology.

You may find holes in your conceptual map or sections that unnecessarily have the same function. The process can help you clarify your designs, identify areas that might not make sense conceptually or visually, and improve your design for all users of your site.

Want to dive deeper into building accessible websites? Join my free email course: 📨 Common accessibility mistakes and how to avoid them. 30 days, 10 lessons, 100% fun! 😀 Sign up here!

Originally published at www.upandup.agency.

You’re a creative professional. You’ve been peering into a laptop all day, and while your eyes and mouse-fingers are fitter than ever, the rest of your body feels like a crumpled can of cola. So, you head to the local gym, shuffle over to the free-weights, and encounter a conversation between some muscle dudes:

MD1: “Sup, bro. What’re you working today?”

MD2: “Delts, traps, and tris. You?”

MD1: “Dang, bro. It’s leg day. Quads and glutes.”

MD2: “Go get it!”

To the uninitiated, this exchange might as well be uttered in an Elvish tongue, but for those with prior exposure to the world of bodybuilding, it’s understood that these brawny gentle-bros are discussing which parts of the physical anatomy they plan to sculpt.

In like fashion, designers have their own obscure nomenclature related to letter anatomy. Letter anatomy? Yes, the characters used to construct our written languages have anatomical features and classifications. In fact, letterform composition can be quite complex.

Still, some may wonder, “If letters have anatomy, is there any practical value that comes with knowing what all the little parts are called?”

There certainly is. Here are four examples that show how knowledge of letter anatomy is useful to professional designers:

1. Conversations with Clients

Most clients won’t have a clue what to call different letter parts. Instead, they’ll say things like, “That little arch connecting the ‘c’ and ‘t’ looks weird to me.” Because you’ve learned letter anatomy, you’ll know exactly what they’re referring to — Gadzook!

2. Diagnosing Design Issues

Letterforms are responsible for all kinds of confounding design issues. Whether in logotypes, section headers, or navigation menus, sometimes letters just don’t look right. Knowing letter anatomy will allow you to quickly pinpoint the problem, understand why it exists, and find a solution. “That ‘e’ looks bad because the finial is too thick. Let’s add a bit more taper.”

3. Enhancing Legibility

Letter anatomy can actually hinder or improve legibility. For instance, fonts with ample counters (the negative space inside of letters like ‘p’ and ‘o’) and a tall x-height (the height of lowercase letters) are typically considered easier to read.

4. Letters are Everywhere

If you’re a designer, there’s no escape — letters dominate our physical and digital environments. With ample letter knowledge, you’ll have access to more solutions when attempting to solve a wide array of visual design problems.

Learning Lesser-Known Typography Anatomy

In actuality, there are a ton of letter anatomy terms, and unless you’re a type designer, you probably don’t need to learn them all. Some are obscure and rarely implemented in the letters we encounter on a regular basis (ball terminal, diacritics, gadzook, etc.), and others are almost universally recognized (x-height, ascender, descender, etc.).

With that in mind, we present a collection of commonly used — yet lesser known — letter parts that every designer should be aware of.

Download a PDF version of this infographic.

• • •

Originally published at www.toptal.com.

Snehil Chouhan

Jan 7

Voice assistants provides a lot more than we think, whether it is setting up quick reminder or ordering food, users can get things done a lot faster and easily than a mobile app, and hence Voice technology is going to be next big thing. Amazon Alexa lead it and have 73% market share in 2018. There is lot more you can do with Alexa, here is list of Top 10 things you can try with your Alexa device. In various predictions we see that by 2020 50% of all searches will be Voice Search. Each year Alexa is setting high selling records on Amazon. It also becomes #1 Top Free app on Google Play and Apple App Store, as it requires mobile app to setup Alexa first time. Not only echo devices but various other smart home devices that are in top selling list are Alexa enabled devices.

6 reasons why voice will be next big thing:

1] It has capability to do almost everything and anything that can be done using Mobile app: As it has capability to develop custom skills, we can develop skills and can connect it to our existing database and with code we can perform almost any operation that can be done with website or mobile app.

2] Quickest way of choosing any internal option for example: if user wants to check his next day’s meetings schedule, he will not need to go through any options/tap one by one. Instead user can directly access by single voice command.

3] Handsfree experience and multitasking: User can get things done while doing other task like operating something, cooking, reading, exercising, cleaning, driving car etc.

4] It gives user option to perform task and be away from screen, it is beneficial for eyes, eyes conscious people prefer voice assistants over screen based devices.

5] Most natural way of communicating with computers: old age people who find it difficult to learn to use smart phone, voice command prove to be easiest thing, as it is most natural way communicating.

6] The best choice over smartphone for Blind and Hand disabled people: As we are discussing voice assistants can perform any task that smartphone does and hence it is best for blind and hand disabled people they do not need to struggle or try for using screen based device for getting any info and various other tasks.

There are more almost 70,000 Skills published on Alexa Skills Store and increasing. Top popular skills have approx. 10,000 Reviews and receiving approx. 15 reviews daily, that is only reviews, imagine its usage.

Going to build Alexa Skill?

Work on your idea: So you have an amazing idea and want to build Alexa Skill for it. Now time is to start work on it. Most important thing to take first step and move ahead step by step. First we need to identify need of skill. and start creating document to list out major points.

Check out your competitors: Go through Amazon Alexa Skill Store on web or on Mobile and check skills related to your idea, and figure out how can your idea be better? or which special feature can you provide to users?

Target Audience: As voice is most natural way of communication, there are almost all age of users, from young to old. we can figure out our audience, some skills are completely designed for kids like learning game and some skills to provide help to elders. General skill can have large audience, skills which can be used by anyone.

Choose right team: Now you have Idea and you have checked market. Its time to start building it. Choosing right team is most crucial part.

Alexa Skill development being quite new field, there are not so many developers and agencies like we see in Web or Mobile app development. While developing any application there are so many important factors that we need to focus on, apart from technical expertise, we need to check if team really cares about providing us best solution with proper support.

Here is my answer to one question important points to focus on while hiring for development project its general points fits everywhere.

Want to generate money from your Skill: Amazon provide In-Skill purchase feature and now there is Consumable using which we can provide repetitive payment option, some digital service/product which user can buy, use and buy again.

Things to focus on while building Alexa Skill:

Focusing on below points will ensure great VUI (Voice User Interface). Skill should have great VUI, it depends on various factors, users should not be forced to listen long content, users should get right help at right time, skill should be able to provide proper data suitable to user, skill’s flow should feel like real conversation not like any old customer service phone call.

1] Invocation Name: Invocation name is used for invoking skill (to start our Alexa skill/app). This must be very clear and meaningful, and something that user can remember, as user needs to call skill’s name to open it. Ideally skill name should be of two words and matching with complete invocation sentence for eg. Alexa, Open Peace World. Here “Peace World” is invocation name. There can be few different words that can be used in place of “Open” like Ask [which is widely used], Begin, Do, Launch, Load etc.

2] Intent: Your technical team may use this word, here Intents we can say like each function that our skill will perform. So users can call different Intents to perform different functions. For eg. if any skill does Turn on/off light. So it can have one Intent for Turn on/off light and one Intent for Adding new user.

3] Utterances: Utterances are synonyms of sentence which we have for calling different Intents. While building Alexa Skill there is option to write utterance manually, these utterance are sentence which user can tell to go to particular intent, or to open particular stage inside our skill. We should write as many utterance as possible. We can take example of one skill, I am developing for hotel, there we have various option that user can ask, if user have to ask for breakfast hours, utterances can be:

What are the breakfast hours?

What time does the breakfast service start?

When is breakfast?

What time does the breakfast service end?

Please let me know the hours of breakfast

What are breakfast hours each morning?

Although Alexa automatically understands similar or matching sentences but it is good to provide many utterances.

4] Music: This part is most important in Alexa skill and unlike mobile app Alexa is based on voice and hence music plays important role. Starting skill with nice music and playing appropriate music on different stage makes skill more compelling and nice to hear. You can find free music files or you can hire someone to create custom music for you.

5] Technical Aspects: Check details below

While Publishing your Alexa Skill:

a) Beta Test: Amazon Developer console now has new option Beta Test which allows us to share our skill with other before publishing and we can keep editing our skill while beta test.

To Enable beta test Go to Distribution option on your In Development skill

b) Be Clear with What Skill can do, so users can set correct expectations

c) Skill should encourage users to leave review so you can know what users are expecting from skill

d) Stay up to date with latest Voice technology and implement skill in best possible way and keep improving it, Voice technology is still emerging and will emerge rapidly over the next years, skill will need to keep update as well.

TECHNICAL ASPECTS:

Designing for Voice is very different than designing for screen. We should not think its flow, interaction with user like we think while developing mobile app or website. Instead the best way to design for Alexa skill is to just to practice real conversation like Alexa Skill will initiate when user will tell “this” invocation sentence then what will be response of Alexa and so on.

Here is one example diagram, for flow we can design any kind of similar diagram:

Designing a initial rough flow like above helps a lot in making whole scenario clear.

One good thing with Alexa Skills is that users never have to download any skill as it runs completely on cloud, users only need to enable skill.

Now comes the actual development part, Amazon provides ASK(Alexa Skill Kit) using which we can develop Skills for Alexa, for developing any custom Alexa Skill there are majorly two sections:

1] Amazon Developer Console: Amazon Developer Console has Alexa Skills section and it has good GUI. It is required to publish any Alexa Skill and it contains information about Invocation name, Intents, Utterances, Endpoint.

From here we can Distribute skill and can also set Beta test, can invite team members or anyone to do Beta test.

2] Backend: Backend/Endpoint of Alexa Skill, as complete Alexa Skill always runs on Cloud, each and every Alexa Skill requires Endpoint. For this we have two options, we can either create endpoint on AWS Lambda or on Own Server.

a) AWS Lambda provides ready to go setup and hence it can be faster. We do not need to create SSL secured server.

b) Own Server: In this case, we require to have https SSL enable server running on port 443 only, and we can use Flask or any other framework to act as server.

Server will have to handle JSON requests from Alexa and will have to provide JSON response. Both AWS and Own server will do same work internally.

Functions & Features :

In this part each skill will differ. It depends on features you want in your skill.

It can be:

Normal question and answer

or if we want to implement some conversation capability

or if we want to connect it to our existing system to our database to provide valuable information to user.

or if it is a game it will include story telling, conversation, music on proper steps etc.

or if the skill is for internal use of Business then we will need to use Alexa for business

Pricing & Budget:

It will almost fully depend on Function & Features we want, as mentioned above.

Another major factor on which Pricing depends is to whom you hire, whether they are big agency or team or single developer.

A good Alexa Skill Development team should have :

1. Voice User Interface designer
2. Developer (Python/Node.js etc)
3. Quality Assurance Engineer
4. Project Manager

Now that you saw all those details about Alexa Skill Development, you may want to hire professional or team to build your Alexa Skill.

I would like to help in providing solution, you can drop enquiry and we can discuss details and suggestions to create better Alexa Skill. We have proper process and team to develop Alexa Skill with great standards.

I hope that I have covered almost everything you need to know to start building your own Alexa Skill. If you have any doubts/queries/suggestions, please let me know in comments, I will surely reply.

and don’t forget to Clap, if you like this article :)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

I am Snehil, CEO of Optimum Technical Labs LLP, feel free to reach out to me via Skype: snehilchouhan, Email: snehilchouhan@gmail.com or LinkedIn

Optimum Technical Labs LLP team works on Mobile app and Alexa Skills development, we have number of happy Clients and nice portfolio, Please reach out for any project enquiry. We would love to help you and will provide suggestions.

CyberCraft Inc.

Jan 4

Are you looking for tips on how to design high-converting landing pages? If so, you have come to the right place. In this brief but informative guide, you will learn the top 7 user experience principles you need to know to design landing pages which convert, and have a high conversion rate.

Before we begin, let us again remind ourselves what a landing page is and what its goals are. A landing page is a dedicated online page built solely for accomplishing one or more marketing goals such as generating leads or getting clicks. When designed and promoted correctly such pages can become valuable marketing instruments. Building high-converting landing pages requires extensive knowledge in such areas as consumer psychology, marketing, copywriting, design, and most importantly, UX — user experience.

Some readers might be unfamiliar with the science of user experience. We must therefore also remind ourselves what this science is about. By user experience, we mean a set of emotions and experience in general, related to using some product or service. User experience as science seeks to determine the key principles and factors which are responsible for creating a certain user experience and discover ways to build the desired UX based on these findings.

(Source: https://upload.wikimedia.org/wikipedia/commons/8/80/User-experience-diagram.png)

As such, UX design services can be successfully applied to designing landing pages and increasing their effectiveness, i.e. conversion rate and other important indicators. So with this in mind, let us review in detail the exact UX principles you should apply to design your landing pages in the future.

Principle #1: No Distractions (No Navigation)

(Photo by Stefan Cosma on Unsplash)

Distractions are the enemies of high conversion. You don’t want your reader to be distracted by irrelevant elements on your web page. You want him or her to be focused on only one thing — your page’s content to persuade him to take the desired action. Therefore, you must ensure the complete absence of any distracting and irrelevant elements on the web page such as for example, navigation.

Yes, you heard that right, navigation bars must be absent on landing pages. As such, it is an irrelevant element which distracts users from the landing page. Therefore, it must be removed. Don’t give your page’s visitors a single chance to get distracted. Besides navigation bars, there may be present some other distractive elements such as pop-up forms, etc. Carefully scan your landing pages to identify anything which may distract visitors and get rid of those.

Principle #2: Minimalism

(Photo by Thomas Quaritsch on Unsplash)

Even among the elements which seem relevant and necessary, there may prove to be some non-essential ones which your landing page can do without. For example, unnecessary links which can take visitors away from a page, irrelevant useless content, etc. Once again, carefully scan a landing page to see if there are any non-vital elements which you can get rid of.

This will allow to further improve a visitor’s focus, and correspondingly, your conversion rate. Minimalism is a real deal. Think of Apple’s success. Minimalism is the cornerstone of the brand’s philosophy which is largely responsible for its success. If Apple always seeks minimalism, wouldn’t it make sense for you to do so as well?

#Principle 3: One Purpose, One CTA (Call-To-Action)

(Photo by Smart on Unsplash)

This principle once again demonstrates the importance of clear focus in landing page design. No distractions, minimalism and one purpose — this is what makes a high-converting landing page. Some landing pages oftentimes have more than one CTA. This confuses visitors and can decrease the conversion rate. A landing page must have only one goal, not two or more. You must have only one call-to-action throughout your entire page. If you want to add more than one CTA, you need to create separate pages for each.

Principle #4: Don’t Use Too Many Fields in Your Forms

Many landing pages have forms which request personal information from visitors. A logical question arises: what affects the conversion rate of a form, and correspondingly the conversion rate of your landing page? The answer is simple — what kind of information you request.

Oftentimes we can see forms with a million of fields starting from your address and ending with your pet’s name. Needless to say, such forms don’t usually enjoy high conversions. You must strive to request only the most essential information which you cannot do without. The fewer fields you use, the better.

Principle #5: Use the Right Color Scheme

(Photo by Scott Webb on Unsplash)

Remember once and for all, color is everything. What colors you use affects the behavior of your visitors, their mood and emotions i.e. the entire user experience. It is therefore important to select the right color scheme for your landing page. Now, how do you go about it? Ideally, you should have a UX expert/designer who can select the right palette using his or her knowledge of color theory. Otherwise, you may want to dive into the subject yourself or find ready-to-use color templates such as this one.

Principle #6: Use the Right Fonts

(Photo by Mr Cup / Fabien Barral on Unsplash)

What fonts you use greatly affects a user’s perception of the text. You may have the best content in the world, but if it is laid in a horrible font, then nothing will help. Therefore, it is not enough to just have the right copy. That copy must be laid out with the right font. There is a separate division in the science of UX which deals with fonts — typography.

It is a good idea to learn some basic UX principles of typography. Usability Geek has prepared a great article on the subject. The bottom line is, ensure that you use the right fonts which perfectly align with other elements of your landing page.

Principle #7: Use Lists and Bullet Points

(Photo by Glenn Carstens-Peters on Unsplash)

Using bullets and lists is a great way to highlight the key points you want your readers to see. Also, it can serve as a great way to catch and focus a user’s attention. Information presented in form of bullets and lists is more easily perceived. Therefore, always put the key takeaways in such form. It is a good idea to list the main advantages in such a way. Use them wherever and whenever you can.

Final Thoughts

We hope you found this brief overview helpful. User experience is real science. If you learn the basic principles of effective UX and apply them to landing page design you should expect much higher conversions and overall business success. We wish you good luck on your journey:)