Sanguine Gui Shorthand

SANGUINE - Specific Action Notation for Graphical User Interface Navigation for Everyone

The 'everyone' part of this acronym is probably not valid. It turns out that this notation is geared toward kinesthetic learners. A new name for this is GuiActionTrace (GAT), since one use of this notation is to trace what actions user takes with a GUI. The extension .gat also makes a nice (and generally unused) file name extension.

SanguineGuiShorthand is one possible solution to the GuiShorthand problem.

The context and forces for this ProtoPattern are on the GuiShorthand page.

This system of GUI shorthand is based on the idea of having the direction to click on a button look a little bit like a button:

   [button]

The idea is to make things look something like in ascii what they look in the GUI.

 Example:

 -- This is HowToAddPerlToYourSystemPath? in Windows 2000 --

 [Start>Setting>Control Panel]
 [[System]]
 [Advanced]
 [Environment Variables...]        # envir.gif #
 |Environment Variables
 |  |System Variables
 |  |  |Path\/|
 |  |  [Edit...]
 |  |  |Edit System Variable
 |  |  |  Variable Value:[_<existingvalue>;<pathtoPerl>_]
 |  |  |__[OK]
 |  |__[OK]
 |__[OK]


 So these are the single character primitives used in the system:

 [   (left bracket)     click - mouse down or key down
 ]   (right bracket)    unclick - mouse up or key up
 <                      text
 >                      end of text (or next item in a selection order)
 :                      label of something
 _   (underscore)       input something (or don't select)
 X                      selection check or maximize or row and column (cell)
 |   (pipe)             inside window (or panel)


 Other single character symbols used are:

 -   (hyphen)           comment or single line ascii art
 (                      description or radio button
 )                      end of description or radio button
 #                      picture or number or screenshot
 .   (period)           wait, repeat, part of key combination, or file structure
 {                      beginning of...
                        a notation for clarification of the previous ']' or '|' element
                        or an action that is optional or is only needed sometimes
                        or a picture file reference used for clarification
 }                      end of...
                        a notation for clarification of the previous ']' or '|' element
                        or an action that is optional or is only needed sometimes
                        or a picture file reference used for clarification
 ^                      control
 /                      menu navigation
 \                      menu navigation or toggle
 '   (apostrophe)       literal or character
 ,   (comma)            list of things
 ^                      control
 +                      single line ascii art
 *   (asterisk)         radio button selection [Preprocessing: convert all selections to *]
 "   (double quote)     refer to this process in this other file or elsewhere in this


 Optional Character Symbols (usually blank):
 ;   (semicolon)        the end of a window
 `   (back tick)        surrounds text sent to the user by the computer
 =                      possibly used to indicate a drag


 Not used for anything yet:

 ~!@$%&?


 Things to Click on: for example Buttons, Hyperlinks, Icons, Menus, Tabs etc.
 ----------------------------------------------------------------------------
 [label]                single click on the hyperlink, button, tab, or icon with
                        this label
 [[label]]              double click on the hyperlink, button, tab, or icon with
                        this label
 [+]                    open hierarchy node
 [-]                    close hierarchy node
 [..]                   move up in hierarchy
 [menu>selection]       select selection 'selection' from the menu 'menu'
                        for example: [File>Save]
 [[label>>selection]]   double click through a series of selections
 (<#>,<#>)              a place on a screen
 (U,L)                  somewhere on the upper left part of the screen
                        or to the upper left of (L,R)
 (L,R)                  somewhere in the lower right part of the screen
                        or to the lower right of (U,L)


 Windows and Panels:
 -------------------
 |title                 Window or panel title
 |__                    the last line regarding this window
 [X]|                   close or exit window
 [_]|                   minimize window
 [MAX]|                 maximize window
 |[MX]                  maximize window
 |[restore]             Restore window
                        (this is an option if the window is presently maximized)
 ---------------------  input into the file or into the multiline text field
                        (as described on the lines below)
 --------------------_  input into the file or into the multiline text field
                        (as described on the lines below)
 ---------------------  end of input into the file
                        (as described on the lines below)
 _--------------------  end of input into the file
                        (as described on the lines below)
 |title---------------  file title - file window title
 >                      type on the command line of a console
 stuff                  stuff returned on the command line


 Primitives:
 -----------
 <text>                 text of this sort (<filename> would mean - a file name)
 <text>                 a brief description of what kind of text should be entered.
 <#>                    a number
 (description)          an icon, region, or button without a label, tool tip,
                        or status bar echo
 #description#          an icon, region, or button without a label, tool tip,
                        or status bar echo, but with a picture
 Text outside of '[' symbols - text you should see on the screen already
                        as part of the form
                        - you don't type this or click on this,
                        the computer presents this
 --drag->               click and drag
 _                      this is a text input field or selection field - input text.
 {}                     optional or may already be done
 ...                    repeat as many times as desired or required
 --                     comment
                        this is a comment describing the action to be taken.
 --                     end of a comment
 . .                    wait a bit (for a state change)
 Layer 1Xframe 1        click this cell in this array
                        (in this case an array of layers and frames)
 [RMB>                  right mouse button
 [LMB>                  left mouse button
 [CMB>                  center mouse button
 [                      left mouse button
 [(U,L)--drag->(L,R)]   click and drag from upper left to lower right
                        (often around something)


 Filling Fields:
 ---------------
 label:[_<text>_]       enter text of this sort into the field with this label
 label:[_text_]         enter this exact text into the field with this label
 label:[_'text'_]       enter this exact text into the field with this label
 label:[_'_text'_]      enter this exact text into the field with this label
                        including the leading underscore
 label:[item\/]         select this specific item from the menu field with this label
 label:[<text>\/]       a selection list
                        for example: [<city>\/] select a city from a list of cities
 label:[item\/[\/][/\][CR]]    select this item from the menu field with this label
                        using these keys to navigate and select
 label:[item\/([\/][/\][CR])]  select this item from the menu field with this label
                        using these keys to navigate and select
 label:|item\/|         select this item from the multiline menu with this label
                        (note these are pipes not square brackets)
 label:|item1,item2\/|  select these items from the multiline menu with this label
                        (note these are pipes not square brackets)


 Toggles:
 --------
 (*)                  select radio button
 ( )                  select some other radio button, or don't select one
 [X]                  check check box
 [_]                  uncheck check box
 [View>Rulers>X]      check selection under a menu: for example Check Rulers selection
 [View>Rulers>_]      uncheck selection under a menu: unCheck RUlers selection
 _]                   Toggle option off
 X]                   Toggle option on
 \]                   Toggle option to opposite state


 Individual keys:
 ----------------
 [^                 control character
                    hold down the control key while selecting the next key
 [ctl.              control character
                    hold down the control key while selecting the next key
 [shift.            shifted key
                    hold down the shift key while selecting the next key
 [alt.              alted key
                    hold down the 'alt' key while selecting the next key
 [win.              'winned' key
                    hold down the 'windows' key while selecting the next key
 [esc.              escaped key
                    hold down the escape' key while selecting the next key
 [^alt.del]         press the control key, then press the alt key, then press
                    the delete key, then release them all (press control-alt-delete)
 ['char']           keyboard character
 ['d']              keyboard character - 'd'
 [d]                keyboard character - 'd'
 [/\]               up arrow
 [->]               right arrow
 [\/]               down arrow
 [<-]               left arrow
 [del]              hit delete key
 [CR]               hit the return or enter key
 [bak]              hit the back space key
 [esc]              escape key
 [F1]               F1 key - first function key
 [space]            space key
 [' ']              space key
 [ ]                space key
 [caps...           turn caps lock on
 ...caps]           turn caps lock off
 [num...            turn num lock on
 ...num]            turn num lock off

The notation for Sanguine Gui Shorthand is based on the idea of a button. The following symbol is the notation that says 'press the label button':

 [label]

This looks like an ASCII representation of a button with the label 'label' displayed on it. It means 'press the label button'. The rest of Sanguine notation is based on this symbology.

The proper level of detail for this is probably the symbolic keystroke level of detail, so that every keystroke is represented. This provides enough detail for a nontechnical person, and a symbolic format provides enough terseness for a technical person.

Examples

 -- log in to the system --
 Username: [_<username>_] Password: [_<password>_] [Submit]

 -- select a city name --
 City Name: [city\/] -- a selection list, for example 
                        the selection of a city from a list of cities --

[What would the GuiShorthand notation to tell someone how to add a graph to this Wiki page look like?]

 [Edit Text]
 -- insert the address of the graph url into the text area at the place you want it --
 |<preexistingtext>|_http://<urladdressofgraphpicture>_|<textbelowinsert>|  [Save]
 [<-Back]
 [<-Back]
 [F5]

Notation

 Username: [_<username>_] -- enter the user name
 Password: [_<password>_] -- enter the password 
 [[text]]                 -- double click on the 'text' icon
 [Submit]  -- hit the submit button
 [                  -- click the mouse somewhere
 ]                  -- unclick the mouse
 _                  -- this is a text input field - input text.
 < and >                  -- a brief description of 
                             what kind of text should be entered.
 --                  -- this is a comment describing the action to be taken.
 Text outside of          -- text you should see on the screen 
   '[' etc. symbols          already as part of the form.

Another possible format is given in the first example of ProgrammersGuiShorthand.

Discussion

Why does the name refer to blood? Or is that just the way the acronym worked out?

Sanguine does indeed come from the latin sanguin, or blood, but in English the adjective sanguine has the common meanings of "healthy" or "optimistic". It comes from the 'four humors' theory of medieval medicine. Other humorous [ugh, WorstPunEver] adjectives include choleric (easily angered), melancholy (depressed), and phlegmatic (cool, unemotional); how medieval psychologists came to these as the four basic emotional states is beyond me. --TimLesher

I've been working with and on the notation for the past five years now and I have found that a possibly better name for it is GAT. This stands for GUI Action Trace, and seems to be good for tracing what a user actually does in a GUI. I have opened a new page at GatCouldMakeGuisEasier to perhaps further the discussion. --JonGrover

Doesn't SAP have something like this?

Users will probably reject this because of the complexity of the notation. A translator would have to be written to convert this to English in order to be acceptable to users. In addition programmers will find the notation ugly.

This proposal is very ambitious. It tries to show pictures of text boxes and command buttons, using a very brief syntax. Unfortunately, the [] syntax for showing command buttons can be confusing, especially if the command button text has an arrow on it.

This would be easier for a computer to parse.

[RefactorMe: If you think this is the best solution among ProgrammersGuiShorthand, AsciiArtGuiShorthand, and SanguineGuiShorthand, you may want to reincorporate this page into the GuiShorthand page.]

The 'everyone' part of this acronym is probably not valid. It turns out that this notation is geared toward KinestheticLearners. A new name for this is GuiActionTrace (GAT), since one use of this notation is to trace what actions user takes with a GUI. .gat also makes a nice (and generally unused) file name extension. --JonGrover