Now that the look and feel of this Blog, is where it’s supposed to be, it’s time to look into and experiment with the User Interface design, of this blog - on this blog.
The idea of experimenting with the UI of this blog, came while following the free course on 5 Days to More Engaging Content 1, by Laura Lindeman.
Day #4 of the course is where Laura mentions that those blue hyper-links, all over the place, can be distracting. Then she links to Eric Dodds’ post - Why Footnotes? 2
This lead to some research on what other things are distracting, to a user/reader while he/she is reading, on the Blog. I made a list of things, all UI based, that I could experiment with.
I decided to start with experimenting with the User Interface of links (anchor tags), first.
User Interface Design: Experimenting with links, within posts.
This experimentation in UI, started with four questions.
1. How can you make links, within posts less distracting?
Links that are resourceful, but can wait for a click through, until the reader finishes the article, are now footnotes .
The idea to use footnotes, for these type of links, came from Eric Dodds post - Why Footnotes?
2. How do you remove the non-important, less resourceful, but more informative links, out of the way?
This one was a doozy . I struck gold, with - Links are broken. These three alternatives have improved our readers’ reading experience, by De Correspondent 3.
The post suggest and demonstrates, how you can improve the readers experience. It does this by using - Info cards, side notes and featured links. All three are methods, excellent for improving user experience, while linking to resources.
Using info cards and featured links, seemed the best way to move forward with the UI experimentation.
What’s an info card?
De Correspondent 3 states that an info card is something that holds extra content. This content is only presented, when the reader feels the need to know more about a topic.
This methods works by presenting a user with an indicator, like a down arrow or a plus sign.Once the reader clicks this indicator, a drop down content area unfolds. The content area shows the reader the appropriate, associated content.
I applied this method of info cards, for links that present an informative resource. Thus, using a variation of the info card method.
An info card on this Blog holds about a line or two, of information. The info card may or may not include a link, to a resource, which provides more information about the name or topic associated.
3. What about featured links / resources?
The featured links method, shown right below & mentioned in the post by De Correspondent 3, is perfect for featured links.
Featured links, are resources that you want the to describe in a little more detail than usual. You want your reader to focus on the information provided and take an action based on that information.
4. What about normal (anchor tag based) link?
Links that provide a valuable resource to the reader, but have too much information attached to this resource, are not included in an info card. In such cases, a normal link works fine.
For e.g.
The below link, does just fine for a valuable resource with a ton of information associated with it.
Help Me.
It would be awesome to know what you think about links presented to you in these formats.
Does it help with removing distracting links and placing weight appropriately, amongst resources linked? Leave a comment and let me know!
-
5 Days to More Engaging Content is a free course, by Laura Lindeman. Sign up for this course, for free. ↩
-
Why Footnotes? is an interesting post about how to minimize link distraction for your reader, by Eric Dodds. ↩
-
Links are broken. These three alternatives have improved our readers’ reading experience, by De Correspondent, is a great post about how to improve the reading experience of your readers by making links less distracting. Read it. ↩ ↩2 ↩3
