UX enhancements for eSteem Surfer app

As I had mentioned in my previous post that I have started using eSteem Surfer app(for desktop), I find it useful. While composing blog, I felt few things could be improved hence providing my suggestions which will add value and improve user experience(UX) of the app.

Repository

https://github.com/esteemapp/esteem-surfer

Components

The suggestions are particularly for the 'editor'.

I've believe the following 3 things would be a great value-add in-terms of user experience.

• Save draft through keyboard(hot keys) when user press ctrl+s.
• Show a confirmation dialog before clearing all the content when user click on 'Clear All'. Accidentally the user might have pressed but there is not way coming back or retrieving the text.
• Shortcut keys for publishing the post.

Proposal Description

Since I have mentioned different issues above, I've proposal for each of them. These are just some basic proposals, the team can think of much better options.

Keyboard shortcut for Save draft

We already have hot keys for making the text bold(ctrl+b) and italic(ctrl+i), similarly when the user press ctrl+s the draft should be saved.

We can extend this usecase to incorporate 'auto-save' feature. Instead of the user clicking on 'Save Draft' everytime, it will be automatically saved. I'm not pushing for this feature since it has one overhead, we will end up with many drafts over a period of time. So auto save is not a priority but hot keys for saving a draft would be great.

In /app/components/elements/Editor.js, we need to make the some changes to accommodate this change. In addition to bold and italic, add key binding for 'Save Draft'.

  onKeyDown = (editor, event) => {
    // Shortcut for **bold**
    if (event.keyCode === 66 && (event.ctrlKey || event.metaKey)) {
      this.bold();
      event.preventDefault();
    }

    // Shortcut for *italic*
    if (event.keyCode === 73 && (event.ctrlKey || event.metaKey)) {
      this.italic();
      event.preventDefault();
    }
    
    // Shortcut to save draft
    if (event.keyCode === 83 && (event.ctrlKey || event.metaKey)) {
      // Code or function call for saving draft goes here..
      event.preventDefault();
    }
  };

Confirm Clear All

When the user click on 'Clear All', the content along with title is reset, it is a good feature but if someone does it accidentally and want to retrieve it back there is no way for it.

Screen recording of the current 'Clear All' behavior

Ideally in UX world, 'reset' buttons are something which should be avoided. There are some reasons behind the that, details can be found here. There is another philosophy that all the user actions must be undoable, let us not dig too much into it now.

In our case, we can prompt a confirmation dialog before clearing off all the content. In that way, atleast the user will get a chance to cancel the action, if they have pressed 'Clear All' inadvertently.

Hot keys for publish

In addition to the above two improvements, we can also add hot keys for publish too. Email clients like outlook, gmail etc allow sending of mails when the user hit ctrl+Enter, similarly the post can be publised with the same shortcut.

Optionally display a confirmation box before publishing it, the user can also opt-out of these confirmations once the user get acquainted with these features. Might be too much to ask for now but let us include it if possible.

Benefits

The benefits with these changes would be improved user experience with the editor.

• Additional keyboard shortcuts for ease of using editor.
• Avoid inadvertent action of clearing all the contents.

I hope these enchancements would add value to the current editor in eSteem Surfer app.

I'm using Windows OS hence used ctrl+s and ctrl+Enter commands as reference, it will change for iOS and Linux.

---

Follow me @lifecruiser