Learn to Code via Tutorials on Repl.it!

← Back to all posts
On good UX
h
CodeLongAndPros (1473)

How to make a good user interface

While browsing repl talk #share, I found a lot of bad interfaces. Not mentioning names, but I want to correct this:

Program output:

KISS

Don't add all the frills unless required.
This means:

  • No TTYesque output.

        for c in str:
          print(c, end='')
          sleep(0.05)
  • No rainbow text

  • No pauses for interpolation

Be like clang

Clang, a C compiler, has some very good error messages:

t.c:1:1: warning: return type of 'main' is not 'int' [-Wmain-return-type]
void main()
^
t.c:1:1: note: change return type to 'int'
void main()
^~~~

It tells you what you did wrong, and how to fix it.

Some messages are bad:

Program input

Follow common practice

If you're making a shell/OSlike thing, don't:

  • Present the user with a menu
  • Make programs called ReadFileContents when cat works/
  • Get in the user's way. (Windows XP won't let you read the root of C:)

You should:

  • Have a help menu
  • According to The zen of python :

    There should be one-- and preferably only one --obvious way to do it.

Make it fast.

If it takes 30 seconds to install packages, the user will be mad when they look at your project.

Don't use Colorama when \033[0m will work

If you need to install 30 packages:

You are doing it wrong

Don't do fake loading.

If your program needs to read a long file, say so.

Don't do:

import halo, time
with halo.Halo(message="Loading OS"):
  time.sleep(2000000000)

UX

The user is dumb.

Design your app as if a five year old or Gilligan had to use it.

Assume they will enter invalid input
Assume they don't RTMP (Read the man pages)
Assume they use a command wrong

Respond to user feedback

If someone says 'I don't like the color of your giant ascii logo', fix it .
If people say your slow_print function is too slow, fix it.

Documentation is like salmon: when it is good, it is very, very good; and when it is bad, it is better than nothing

Document the *NIX out of your code. If you write a good post on how to use it, people will be more liberal with their upvotes.

If it's not good, it's better than none.

Please let me know if you have any UX feedback on this article.

$ logout

Commentshotnewtop
ChezCoder (1559)

+1 <3
the most beautiful tutorial on repl
no confusing ideas
no upvote begging
clear as crystal

but maybe

maybe
a bit offensive...

suggest you remove the 85 year old man part

CodeLongAndPros (1473)

@ChezCoder I'm not trying to be offensive, just making a point.
I'll update it with Gilligan

CodeLongAndPros (1473)

@ChezCoder I also never mentioned man, just 85 year old

CodeLongAndPros (1473)

@ChezCoder

Clear as crystal

Clear as \033[2J

There. I fixed it.

ChezCoder (1559)

@CodeLongAndPros lol. but doesn't \033c also clear it?

ChezCoder (1559)

@CodeLongAndPros wow there are way more ansicodes than i thought

Viper2211 (83)

This is a truly honest tutorial. Hats off.

Bloxy_Cola (16)

@CodeLongAndPros i dont get it + i have an invalid name

CodeLongAndPros (1473)

@Bloxy_Cola

  • There is a show called ‘Gilligan’s Island’. In it, the main character, Gilligan always ruins other’s plans.
  • idk
rediar (403)

The more cryptic the error messages, the better, it’s way more fun for the maker that way

CSharpIsGud (646)

@rediar That depends on what language it is

CSharpIsGud (646)

@rediar There's segmentation faults, allocation errors, and of course there is also the possibility of a crash with just no message at all!

CodeLongAndPros (1473)

@CSharpIsGud I know that, but shouldn’t those be caught and trapped during testing?

CSharpIsGud (646)

@CodeLongAndPros testing does not mean you know where its coming from, segfaults dont have any line number to tell you where to look

CSharpIsGud (646)

@CodeLongAndPros you have to use that via a terminal if you dont have an ide that does it for you

Jakman (458)

Very well thought out of you!