As the number of readers is increasing day by day in this fast going world, it’s important to engage user on the page for more time.
Recently At iconscout, I got to work on designing the blog article page. the aim was to make sure the user is getting a comfortable reading experience. experience depends on the way user read. so before starting designing, user research was necessary.
User Research
No one read at first actually. user just scan the information on the web. if they find something helpful then only they are going to read further. after user research I got to know about many things, few of them is:
User behaviour of reading
Reading patterns
Visual hierarchy of text
Typography
Information Gathering
Every page contains key elements that describe the particular page. if those elements are not there then user engagement may get reduced and that creates a bad experience. So, here as I was designing a blog page I started gathering information about what are the key elements for blog page, what data should be there and what should be the priority.
As per the requirement, I defined key elements for the blog page. which is:
Title
Cover
Author
Publication date
Category
Heading and Sub Heading
Paragraph
Images
Bullet points
Quote
Social Sharing
Subscribe CTA
Tags
Comments
Low Fidelity Wireframe
With the research that I did before I got to know that no user will scroll down and read further if they don’t find anything useful on the landing screen. so again I listed what things need to be there on the landing screen to engage the users and make them scroll to read more.
The metadata I decided to put on the landing screen:
Blog Cover
Blog Title
Short Description
Author
Publication date
Category
Designing User Interface
After all the key elements were listed, I started working on UI. Again the goal was to provide a more pleasurable read. Readability is about the overall reading experience. How easy can we scan text layout, distinguish heading, subheading, paragraphs, and blocks.
Things on which I focused to provide the best reading experience:
1. Type Hierarchy - to give a clear sense of the structure of the page
The hierarchy defines how to read through the content. It makes us distinguish the heading from subheading and body text. To achieve this we can use different text sizes, paddings, margins, contrast, and much more.
Here is why the visual hierarchy matters:
2. Line Height- to increase readability
When it comes to reading content, line height performs a critical role. it’s not applicable to only design but also for documents and book. Here I have used one simple calculation to get perfect line height:
New line height = default line height * 1.5
It may vary in different scenarios but most of the time, it works perfectly.
3. Paragraph Spacing - to make each paragraph distinct
If paragraph spacing is not defined then user(writer) will press enter/return multiple time and that can create large gap. because of this, it may create confusion for reader whether the content is of same section or new section.
Paragraph space should be same as body text size. if body text size is 20 then paragraph space should be 20.
4. White Space - to make content easily scannable
If white space is not there, user will get to see a lot of overloaded content at once and that creates an uncomfortable reading experience. to make user scan the content of the page easily, white space is important. The basic role of white space is to reduce the amount of text user see all at once.
Final Outcome
With taking care of these small things, I tried to deliver a pleasurable reading experience to the user.
Thank you for reading. show some love if you liked.