1

I have been working on a project which allows users to read stories. My motive is to keep reading less distracting , So user can focus on reading more.

I am confused about location of share buttons on page. I am using addThis expanding layout for sharing on the website.

What should be right way to provide a better user experience for reading and also to encourage users to share content.

Desktop view:

enter image description here

Mobile View: enter image description here

1

Place the social media buttons below the text so the user will use them after reading your article.

There is no reason why anyone would like/share an article before reading it (placing them at the top), also even if i would like to share/like them i would need to return to the back after reading, so place them below.

Regarding your usability question: you need to work on your text layout, i don't find your text-layout visually pleasing and to be honest i wouldn't read your articles if they looked like this.

Since text is key to your project you need to really work on this, for a start you can read this: https://baymard.com/blog/line-length-readability

I would also remove the arrows and the pagination and only make them visible when the user is moving his mouse, so he can really focus on text while reading.

  • Yeah. Text is the key of my project and I really struggling with making reading easy for the user. Motive of the site is to make a collection of stories from different sources and to make it easier for the user to read them online. It will be great if you can share more such link , so I can work on them. – Abhijeet Panwar Aug 11 '17 at 8:37
  • Thanks for your honest input . By default when your is reading , footer is not visible. Footer becomes visible when the user reaches the end of the page – Abhijeet Panwar Aug 11 '17 at 8:44
  • Here's a thread about justified text and legibility. It's rarely done. You'd be much better off with left aligned text. – Mike M Aug 11 '17 at 8:50
  • @MikeM : Tried it with left aligned text but it looks very awkward that way. – Abhijeet Panwar Aug 11 '17 at 9:16
  • Given than text is a key part of your project and you're struggling to make reading easier for the user, one key thing that you can do to increase readability is to modify your measure (aka your line length). Currently, the lines of text are too long. Decreasing them to be ~65 characters on desktop is recommended. Please see my answer for details. – Jonathan Aug 12 '17 at 16:07
1

All the text related styling has to be definitely taken care of. Try to find out different typography styles that best suit your content.

If you intend to make your user share his article, you can place the share/save option on the top navigation bar and make the top bar sticky so that the user always has the option to share/save whenever he wants.

The reason why I am suggesting this is, if the topic is not relevant to one user but it will be relevant to someone the user knows, user will not be able to find the share button which is at the bottom of the screen. So, save the scroll effort and have the share button handy on top.

Also, placing the share button on the bottom sticky bar will not be a good option since real estate space will be wasted.

1

1. Put the social icons underneath the post.

  • People are probably less likely to recommend the post before reading it.
  • Make sure that it's clear that the social icons are related to the post (if there are multiple posts on a page, you can use enclosure like Facebook does before.

Here are some examples:

Facebook

enter image description here

Smashing Magazine

enter image description here

2. Reduce your line length (a.k.a. measure) on the desktop to be ~65 characters.

  • Optimal line length is between 50-75 characters
  • I measured the first few lines of text, and they were between 77 and 90 characters (too long)

If people can't read the text easily they probably won't share it regardless of where you put the buttons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.