• Dalsukh Tapaniya

Designing Blog/Article Page: UX Case Study

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.

If you want to see more work and to know more about me you can follow me on dribbble, Instagram, Twitter.

13 views

Recent Posts

See All

🙌

Let's build something great together!

Email

Made with ❤️ by Dalsukh Tapaniya