How to improve the Steemit user interface and experience

in #steemit10 years ago (edited)

This is my first day on Steemit, I've joined about an hour ago, and I very much like the idea. Personally, I think the main issue with any cyptocurrency is not the technology, but how to get the coins into the hands of as many people as possible, so they can actually buy something with them. In the chicken-and-the-egg question of which comes first: sellers / merchants / distributors who offer goods and services for cryptocurrencies, or people which actually possess some to spend, I firmly believe than once enough people have coins to spend, stores will pop up which accept the coins. Anyway, that's a different story.

I'm new to Steemit and the concept of profile verification seems a bit fuzzy to me. Anyway, here's a link to this very post from my Facebook profile, that should be enough proof that I'm behind both.

For the last hour or so I've been exploring Steemit and it looks promising. I do kind of have the feeling of it being half-finished, though, from the user interface point of view. Like it or not, people like familiar things and get confused or distracted when they encounter something at odds with their previous experiences. Blogs and social media platforms have been around for a long time and there are some UI/UX conventions which are taken for granted and expected of new platforms. Here's a list of a few of those which I think could be applied in Steemit pretty much urgently if it wants to attract more users.

#1: "Submit a story" should be central

What is the stated #1 reason for Steemit to exists, what is its central function? From what I've read, I think it's users generating blog submissions, and other users upvoting them. Currently, the "Submit a story" link is alllll the way up and to the right-hand side of the page:

While instead, it should be really in a central place, where the users' eyes go the most, like in Facebook or Twitter, or Tumblr. It's good for the economy ;)

So keep it where it already is (except when the user clicks it to actually start writing a post, where it's confusing), and also make a similar action link right on the top of the feed, etc. pages.

#2: Image uploads must be painless

Steemit doesn't have an image upload function! Now, I know how to use Imgur to upload images and fetch direct image URLs to copy-paste them into the editor... but I suppose the percentage of people who know how to do that is really tiny. And the image doesn't even appear in the WYSIWYG editor!

Even having a "normal" upload button in the blog toolbar (I don't want to use Markdown to blog, it's too technical and low-level, it distracts me from the actual content, because the type of content I write has a lot of links and images) is no longer enough. Gmail has taught me to simply Copy&Paste direct images into the editor - not links, but actual images: right click an image somewhere, choose Copy Image, go to Gmail mail editor, hit Ctrl-V - so it certainly can be done. I certainly didn't add as many images to this post as I've planned because it's a hassle to do so.

Now imagine if Tumblr had no image functionality? Would it be as popular?

Imagine Facebook without images! Even the huge Twitter had to buckle down because people really, really want to share images (and images certainly take much more than 140 bytes to store...).

If the disk space for images is a problem, I'm sure some kind of API arrangement can be made with Imgur or any other similar site.

Btw. the way Medium loads and reveals large images in posts is genius!

#3: Matching user UI expectations

I somewhat like the current design, but I think it's a bit quaint. As a sometimes-backend-developer, I appreciate that the developers or Steemit recognised that their strengths are in the code powering the site and simply used Bootstrap or something similar to make a nice, decent web site. But again, to appeal to the larger audiences, a more florid and tight design is pretty much necessary.

And again, the designs of blogs and social media platforms which already exist have trained their users to expect certain look&feel, which though possibly not optimal, is nevertheless what the users have come to expect from all the others. If you look at how Twitter, Facebook, Tumblr, and Medium are designed, certain patterns appear, don't they?

A real designer cannot be replaced with Bootstrap.

#4: Some UI ideas

#4.1 Move FOLLOW / MUTE closer to the profile name

Currently, when looking at a user's profile, the FOLLOW/MUTE buttons are on the far right-hand side of the page (hmmm, is that a pattern?):

This is jarring as it made me hunt for a few seconds to find it, and while I actually invested the time and effort, I can imagine that a measurable percentage of users won't. To make this effective, those actions should be very close to the actual profile name, something like within 50 pixels of it, to be visually associated with it. Probably near the follower count. Again, just see how it's done by everyone else and you'll reduce alienating the audience.

#4.2: Profile links should have Profile hover boxes

The @something strings of characters are recognised as profile IDs, and turned into links within posts, which is excellent. They would be even better and more informative if they would also generate a small tool-tip-like hover boxes with generic profile information such as the profile picture, the number of followers, number of posts, a big link to the profile, FOLLOW / MUTE actions, etc. 

----

----

That would present the users with interesting information and links right away. And since upvoting is beneficial to Steem economy, increasing the chance that the users will follow profiles also increases the chance that they will see posts worth upvoting.

#4.3: Post information should be always on top and non-scrollable

Steemit apparently goes for the "long format" text posts, and this makes scrolling to see voting links and information about the post very tedious:

----

----

Since voting is the primary way of distributing coins, it's important that its function be always easily available. By copying the content of this bar into a non-scrolling region at the top of the page, it always will be.

#4.4: Add borders around inserted images

Ah, I see another one: the blocks of text above in between "----" are actually an image of a portion of a screenshot of another Steemit post: without image borders, it's indistinguishable from my own text and I had to add "----" dashes after I saw how it looked. That's another UI improvement :) Speaking of that, a PREVIEW action would have been nice, so I could see that problem before submitting the post.

#4.5: Allow users to pick an image which will represent their post in the feed

What it says on the tin. Currently, this post is represented by a useless, non-descriptive image. I doubt it helps attract readers :)

#4.6: Make it easier to see my post

Authors generally like seeing how their posts are doing with upvotes, etc. so reducing the number of clicks to see them (currently, I think it's three clicks, AFTER you figure out where to click), is beneficial to their vanity, happiness, and desire to create more posts. On Facebook and Twitter, it's a single click. 

#5: The meta-idea

It basically all revolves around what is the core idea, or the core activity on the site. If it's posting and upvoting, special care should be given not only directly to that functionality, but also to all functionalities which support it and lead to it.

I'm sure there is more to improve!

Sort:  

Yo make some great and very valid points .

Congratulations @ivoras! You have received a personal award!

Happy Birthday - 1 Year on Steemit Happy Birthday - 1 Year on Steemit
Click on the badge to view your own Board of Honor on SteemitBoard.

By upvoting this notification, you can help all Steemit users. Learn how here!

Coin Marketplace

STEEM 0.04
TRX 0.33
JST 0.093
BTC 62690.84
ETH 1772.84
USDT 1.00
SBD 0.39