Eye Tracking and User eXperience, Steemit

5 days ago
72 in steemit

Recently been thinking about user experience on Steem apps that I have been developing (eSteem mobile, desktop wallet app, SteemPoll, etc.)

User experience is very important topic and it contributes to user retention greatly. In this post, let's do some experiment about Steemit.com and how is your experience with it... One of the main focus of UX developers is to guide user through the interface with ease and without additional cognitive loads. Also Marketing and UX experts mostly think about things like does user's attention goes to right places, where user is looking and how long, what part of interface they miss.

There are numerous eye tracking studies that show how effective it can be and how to improve it. You can google eye tracking studies to learn more but in this post let's explore and get your input on few things.

Experiment 1

  1. Open new incognito window on your browser (Ctrl+Shift+N/Cmd+Shift+N)
  2. Open https://steemit.com
  3. Notice first thing you see and where you concentrate before and after page is loaded?
  4. Write comment answering above question

Experiment 2

  1. Open any post
  2. Where did you look first and why you have changed if you moved your focus to some other place?
  3. Write comment answering above question

Experiment 3

  1. Open new incognito tab (Ctrl+T/Cmd+T)
  2. Open https://steemit.com/@good-karma or any other user's account
  3. Where did your attention go first?
  4. Write comment answering above question

Let's see if we can manage to find uneasy spots collectively!

Example

Order of focus is defined with stripes from dark shade to light


If it takes slight effort and moves your attention from one spot to another which means design/flow is not working properly and can use improvements. Even if it was intention of design, is it emphasizing or showing right things to user to keep them on site... Let's find out...

Feel free to share screenshot to illustrate your attention movement OR explain with few words where have your attention diverted, I am sure it will be helpful to improve site...

Steem on!

Authors get paid when people like you upvote their post.
Join our amazing community to comment and reward others.
Sort Order:  trending
68
  ·  5 days ago

Steemit needs to be "prettier" -for lack of a better word- if we want more people to use it. Busy looks better, but it's impossible to create a post, it's so frustrating. At least Busy has a nice design. The look of Steemit hasn't changed since i joined last July, and it needs a better design.

·
46
  ·  4 days ago

the clean and "distraction-free" view, to borrow from WordPress here, is one of its major advantages and one additional reason making it so much better than cluttered Facebook and the likes. So, guys over at Steem, be careful to not lose this important "selling point" in an attempt of "making it pretty" (it already is)!

More important would be certain usability functions (like Searching inside Steem for certain posts etc, still haven't figured out that one, or is it just me...?) and possibly an easier sign-up process (it's not a coincidence that Twitter and Facebook make this soooo borderline-idiotic easy as the know a thing or two about marketing and conversion rates -- if nothing else :) though).

Just my 2p...

·
·
52
  ·  4 days ago

Agreed, I really like the clean white theme too however I think the site is a little bit too raw, it doesn't look like a finished product. It's possible to have both a clean and pretty interface, look at medium. Sometimes you just have to add a few details to make it look slick and polished, I also hope that with the new communities feature users will be able to personnalized their page like reddit, it makes it more inviting and lively.

·
·
71
  ·  4 days ago

clean and distraction free is a BIG thing to me.
I hate "busy" webpages.(not the steemit busy..but the other kind)

·
67
  ·  4 days ago

If not "prettier," at least more "modern" looking. The current format is a little on the "early 2000s message board" side. It doesn't bother me severely; at least it's pretty uncluttered... but a "general" user will expect more features to be in evidence.

·
·
68
  ·  4 days ago

Yes, that's "pretty much" what I meant. 😉 People are used to lots of nice graphics and features, like the Busy platform. If Steemit wants to catch on, it's going to have to upgrade, IMHO.

·
59
  ·  4 days ago

Pawn to e4!

Oh, and I agree!

·
·
68
  ·  4 days ago

1....c5 ;)

·
·
·
56
  ·  3 days ago

2-Nf3

·
48
  ·  4 days ago

Hi all the steemit friends in my post @marzukibran have to follow all the pleas visit, follow me back and upvote my post
Give me a chance steemit friends all, thanks .......!

·
72
  ·  5 days ago

Thanks, let's see how this experiment works out! 😉

40
  ·  5 days ago
  1. Welcome to the Blockchain! (page loaded quickly so nothing else didn't attract my attention)
  2. Post title and author name, then post image after it has loaded
  3. good-karma, then first post title, then avatar after it has loaded
·
72
  ·  5 days ago

Thank you for sharing your views and experience! 👍

  1. Where did you look 1st and 2nd?
  2. Great, I think we should consider, habit as well if you used site for a while. But I wonder if it would make easier to add author right under title?!
  3. Great
·
·
40
  ·  5 days ago

(1) First I saw the title ("Welcome to the Blockchain!") and 2nd the "Sign Up" button. BTW the title felt a bit confusing to me, I would expect something like "Welcome to Steemit, a blockchain-based social media" or something like this, more specific to Steemit. Also I've noticed that the "Sign Up" button could be wider to compete better with the "Learn More" button.

·
·
48
  ·  4 days ago

Hi all the steemit friends in my post @marzukibran have to follow all the pleas visit, follow me back and upvote my post
Give me a chance steemit friends all, thanks .......!

63
  ·  4 days ago

NOW YOUR TALKING! This line of inquiry is sorely lacking in the dev community in general. What this post does is conduct a very important series of "experiments", albeit fairly rudimentary, but designed to gather information about what users find important.

What a breath of fresh air to see such ideas discussed let along trending here on steemit. I truly hope the UI devs of steemit (and other projects) will internalize the ideas you have presented here and act on them by doing similar and more in depth characterization of their UI designs. To get an optimum UI / UX such testing and experimentation is necessary, and the wider the audience the better quality the information gathered will be.

In our rush to complete the tasks that provide features, this aspect of design has largely been lost. It's old school UI design. Also the pressure to "get on with it" so profits can roll in is also a factor. Good design takes time. Good marketing takes research on who you intend to market to.

Thank you good-karma for such an important article. Also glad to see the huge payout I see here. Great job!

40
  ·  4 days ago

Experiment 3:
My first thing to check is the no of followers. I do this naturally when viewing social media, for example, twitter/Instagram to see credibility. Then I check the Posts headlines to see if the content someone provides is good or spammy. Hope this helps.

·
72
  ·  4 days ago

Thanks for input! Yes it does... How about front pages, what are your impressions when you see posts on your feed, where do you look first and last?

·
·
40
  ·  4 days ago

in the front pages, I again look at the headlines and i see many Bitcoin/currency related posts. More than 50% is always about cryptocurrency getting popular , their price movement etc. I think we need a bit of diversity. Especially in the front page. Maybe some kind of algorithm to limit same keywords to max 20% of posts. Or something like that.

·
·
·
59
  ·  4 days ago

I like the idea of having a set limit to the number same keywords on trending page. I think it's important to have some diversity on topics and authors that show up there, IF we're after maximizing Steemit appeal/ growth.

46
  ·  4 days ago

Hi,
I tried experiment #2.
I opened 3 different posts and found that every time my eyes travelled towards the pictures that had yellow or red in them. I guess it's because our brains are hard wired to see those or maybe it's because we are taught that those mean danger or pay attention. Thanks

·
72
  ·  4 days ago

Great, thanks for input!

:) You may be right, images play big role in articles!

·
·
46
  ·  4 days ago

I reposted your post as I think it a great way to learn watch catches the readers eye. Thanks

58
  ·  4 days ago

The steemit experience would be great with a new interface but that is less of a priority in my opinion. Reddit is ugly as can be but the quality of its features allow it to thrive. Steemit needs to nail this community feature on the head soon.

For text based posts - Steemit should provide a Medium like experience. There is a reason so many writers enjoy posting and reading there. Clean text and formatting is key.

·
72
  ·  4 days ago

I agree that reading as well as writing experience is the major driver. Although there are small bits which contributes to that like font type, edges of fields, coloring etc. Every one is eagerly waiting for communities feature which I think will be huge and allow you to browse/find different content more easily...

·
·
58
  ·  4 days ago

The community feature execution is going to make or break this platform

·
·
·
72
  ·  4 days ago

😅 I guess we will see what happens soon

67
  ·  4 days ago

I may not be a good test subject because an "another life" I was a tech in a usability lab for an OEM, but let's go anyway.

Experiment 1: Before the page loads, I'm looking at the autofill to see if it brings up steemit. It does. Hit enter.

First place my eyes go is top... "Welcome to the Blockchain." Most valuable real estate on the page.

(side note: That's a change-- it used to be top-left, when we had predominantly left navigation.)

Experiment 2: Eyes top to the title; then shift to study user's avatar.

Experiment 3: Eyes top to center of the blue header bar, to your username-- most contrasty and visible. I noticed here that my eyes actually "swept" there from loosely looking at the space in the blue above the word "Blog." Old habits, I guess... based on where I expect the "bang" on the page to be.

Another piece of random commentary: I'm an older user (mid-50's) with nearly 25 years doing things online. The thing I am struggling the MOST to adapt to (af all web changes over the years) is using web sites clearly designed for mobile... on a desktop or laptop. I still have to remind myself to scroll down when all I see on the page is a solid block of color with two words (or NO words) sitting there... and I'm thinking "Where's the effing web site???"

I appreciate the minimalistic look, but let's for God's sake have at least a little visible navigation, or something!

·
72
  ·  4 days ago

Thanks for input, great points! I agree, recent years web design and patterns have changed a lot.

40
  ·  4 days ago

What I found from my experience is that the Reply icon should be a bit more prominent. This is the same with the Resteem icon. As it is now, nearly every time I go to post a reply, which isn't too often due to this fact, I have trouble finding it. An annoyance at best, but still something that takes away from user experience.

49
  ·  5 days ago
  1. Welcome to the block chain!
    briefly at the posts, to tags, then back to posts
  2. Image on post (it was a gif)
    Up to author and title after, then back down to start reading post.
  3. Posts, then up to name & bio. Picture so small would prefer bigger.

Thanks for running this experiment, I love how proactive this place is.

·
72
  ·  5 days ago

Great, Thank you for your input! 😉

49
  ·  2 days ago
  1. Welcome to the Blockchain! Your voice is worth now. Before that I haven't enough time to notice anything else.
  2. Name of the post
  3. good-karma and then "Action expresses priorities!" / Witness - Developer of eSteem, SteemPoll, SteemMonitor, SteemFest apps
·
72
  ·  2 days ago

Thanks for your input! ;)

65
  ·  3 days ago

Once I'm logged in, my eyes never stray from the top right corner to see notifications. It's quite compulsive :/
More generally, I love the simplicity but agree Steemit should be graphically sexed up a little bit and perhaps a bit more personalized, e.g. having favorite tags appear on top. I'd also like to see a mobile Steemit app that played on the Instagram model, but with the crypto thing. Imagine getting paid to be a narcissist.

30
  ·  4 days ago
  1. the message "Welcome to the Blockchain!"
  2. Post title and post images
  3. "good-karma" then the first fiew posts
28
  ·  4 days ago

Any chance for "Chat" on Steem?
I realize this doesn't directly answer you UI question - but chat within the UI would be a great feature

·
72
  ·  4 days ago

Building chat on top of Steem is not an issue, it is whether private (temp) messages should be stored on Blockchain forever...

·
72
  ·  5 days ago

Well, if you accessing it through mobile... you can share your experience as well ;)

·
·
52
  ·  4 days ago

Well, that what should i do

·
52
  ·  5 days ago

I tried it but i didnt understand yet, i have to try over my pc letter

·
72
  ·  5 days ago

Hi, Yes! eSteem mobile version is available for Android and iOS devices. Look for eSteem mobile on AppStore. New version is coming with some more improvements soon.

64
  ·  4 days ago

Congratulations @good-karma!
Your post was mentioned in my hit parade in the following categories:

  • Upvotes - Ranked 1 with 556 upvotes
  • Pending payout - Ranked 1 with $ 523,47
56
  ·  5 days ago

Very nice and informative article!
Steemit, in my view, needs to be more attractive and appealing to the eye.

55
  ·  5 days ago

I've been using your app gk. And what strikes me is that it is not the interface that is laging. It is the rendering of pages and the fact that it feels sluggish. It might be my aging iPhone 5s. But compared to safari it is slow. It has lots of other cool features though like checking my voting power. Is it some way to make it faster?

·
72
  ·  5 days ago

Next version is in works, it will fix some of those issues, stay tuned! ;)

51
  ·  5 days ago

On firefox, Welcome to steemit come for the rewards.

51
  ·  5 days ago

Will CTL SHT N apply in moxilla firefox because it is taking me to another place

·
72
  ·  5 days ago

Not sure, I guess each browser has its own hot keys to open private (incognito) tab...

56
  ·  4 days ago

this information is helpful, thank you for the guidance. I am not so experience on using those code yet or computer techy hehe , but I am up to learn more and make improvements ^_^

44
  ·  3 days ago

ok but this could lead to some other things that could be bad later on

48
  ·  4 days ago

Hi all the steemit friends in my post @marzukibran have to follow all the pleas visit, follow me back and upvote my post
Give me a chance steemit friends all, thanks .......!

48
  ·  4 days ago

You have a great post and you are a creative person with great talent, I have followed almost all of your posts and I really want to be like you, please provide feedback or suggestions so that I can be like you. , And please give me your support I have followed you follow me and open your little voice for me even I rarely get ransom 1.00 $ help me my friend give me input me I can reach at least worth the smallest ransom you have , Thanks </ center>

FOLLOW ME @marzukibrain


</ center>


·
65
  ·  3 days ago

Dude. Seriously.

44
  ·  4 days ago

FOLLOW ME @khairul5577 thank