3

I want to improve the retro-ness and the coolness of this CLI (command-line interface) for a web app. I just want it to give the user the experience of typing into a 1980s library terminal, at, say, the library of congress. Something with a basic front, but awesome power / or lots of information behind it.

The example I would like suggestions for how to achieve this is here http://jsfiddle.net/4Aq4A/6/

enter image description here

I am inspired by these kind of green-screen memories from my 1980s childhood, and by memories evoked by sites like http://textfiles.com and http://assembler.org

As much as possible I want to convey this experience with a few simple, direct strokes while leaving the Apple-style menu bar in place - I got brave.

UPDATES:

Okay, as per suggestions I have added the block cursor, and removed fancy menu and scroll bars. I also like scan lines, network activity, and the idea that it is not about a command prompt. But if it is not a command prompt, what is it? And what actually is a scan line?

Additional clarification. The items the user is asked to create [and the actions they are asked to perform] are:

  1. Data Points and Action Points. [click on web page, then annotate via UX in the box]
  2. Packages. Has one or more 1. [created by interaction with the box]
  3. Iterables. Has one or more 2. [created by interaction with the box]
  4. Collection Script. Has one or more 3.

The other action a user can take is, when they are happy with their "Collection Script", which is a list of iterables, which in turn contain packages, which in turn contain data and action points, they can submit it to our server for processing.

You all really understood the retro look. I would like your suggestions for improving the form and function further, given this more detailed functionality. I think I am leaning toward the Dynix style of user interface, with scan lines, and a little sound. I really like those highlighted menu items that one can cursor around.

4
  • 1
    These terminals did not sport fancy menus outside their main area, nor did they have scroll bars.
    – André
    Mar 7, 2013 at 11:16
  • @André it is true. I guess I could lose the scroll bars. That would not really diminish functionality. It might even make things clearer. Good idea. Fancy menu....I don't think I want to lose it. I want to combine the two UX together. What do you think? Mar 7, 2013 at 11:20
  • Are you looking for suggestions on visuals or functionality or both?
    – obelia
    Mar 7, 2013 at 19:07
  • 1
    hmm... it's one thing to be faithful to age, and another thing to be usable. The 80s style of working was - as AS/400 basically hardcoded later - "menu-form-menu" duality. compared to that, a command line interface of select it 1<enter> select pkg "mypkg"<enter> add ap "do the thing"<enter> might be better for advanced users, think of a UNIX userland. Perhaps a combined prompt + (text) GUI like in total commander could work? I've found old UNIX command-lines more comfortable for advanced users than 80s TUIs simh.trailing-edge.com/software.html
    – Aadaam
    Mar 11, 2013 at 12:16

4 Answers 4

3

There are various way to improve the retro CLI feeling of your web app. Here are a few:

1) Block cursor

I would add a block cursor that very slowly blinks, like:

block cursor example

2) Scan lines

Scan lines are cool, period.

Scan lines on an old-school monitor

3) Sound

Although it should absolutely be optional and be done really well, sound can really enhance the experience. You could go for the clicking sound of an old 2kg-weighing IBM keyboard as the user types, or some random beeps and noises happening. I would keep it limited to user activity though, as that enhances the experiences rather than annoying it.

Old-school IBM keyboard

4) Show network activity

Imagine how cool would it be to show how many users are currently connected to the system. You could have all kinds of network activity happening, users logging on and off, talk messages, etc.

3
  • Yes! I want that block cursor. Very cool. Mar 7, 2013 at 10:53
  • Here is my strategy for implementing cursor. Remove existing cursor by removing text color. Stroke text using, instead, text-shadow. Program a cursor using a transparent div overlay in javascript based on the position of the real (now invisible) cursor. Mar 7, 2013 at 11:14
  • Thanks for the enhanced suggestions. Sound would be a new one for me, but I want that. I do believe it could enhance a users experience as well. Mar 8, 2013 at 3:37
2

I would also try to get the feeling of the curved screen, if possible, since that was the way thing looked back in the 1980s' when I learned programming. Also make sure that users can't save their work but must put their programs on paper and when coming back to the site - they need to put everything in the computer again.

enter image description here enter image description here

2
  • 1
    @haha...Can't save their work. Maybe. Mar 8, 2013 at 3:39
  • 1
    Up friggin' voted. Provide them with a stack of punchcards, too. Mar 9, 2013 at 19:08
1

Applications in that time period were not command-line oriented as far as I know.

You're saying "library terminal", so I guess you mean VAX/VMS and SystemV / BSD apps of the age.

Look at old BBS screenshots (Bulletin-Board System), old 80s actual library management systems, like Dynix which was one of the most widespread as Wikipedia suggests, AS/400 apps (albeit those came in 1988), the Elm e-mail client, the original Star Trek game, dBase (the original version), anything which wasn't written for CP/M or microcomputers like IBM PC at that time.

I guess applications by the 80s were not about prompts perhaps.

1
  • This helped a lot. Getting out of the command line interface to use a Dynix style system is what I want now. Mar 8, 2013 at 3:55
1

One feature I really liked in CLIs was called command recall or something that was on VAX/VMS systems:

When you hit the up-arrow button the previously executed command is recalled. It is not executed, the text line is redisplayed and it can be edited or an will execute it. Hitting up-arrow again takes you back to earlier commands, and down-arrow takes you to later commands (until you're back to the latest executed command). Right and left arrow facilitate editing the current line.

Some systems I remember had the convention of an insert mode and an overwrite mode when editing the line, and insert mode was indicated by a line cursor and overwrite mode indicated by a block cursor. Both cursors blinked.

And terminal ascii art "screen painting" was the practice back then. Remember, when all you had was a terminal style UI developers would push it to every trick available (which wasn't much) so they'd "paint" intro screens and such out of characters. Most programs had their own intro screen which was rendered in ASCII (256 characters!). For a real old time terminal effect you might limit the output speed to something like 10 characters per second.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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