UX Design -- Updated 2018/10/28
to Snerx -- Contact us on our official Discord
:: Design Principles ::
- Plaintext Accessible -
All interfaces are setup in such a way as to be easily readable in plaintext format in
a terminal. This is to ensure that reading content in raw format will still render it
properly and in an immediately-sensible modality. This also ensures that content will
render properly on small screens, with 64 characters being the target width. Ex: /curl
- Max Depth Two -
All content is only ever one layer deep. This means that all category of content in a
system and all particular pages for all content are all listed at the most superficial
layer of the system (e.g. the Snerx landing page lists all projects with immediacy).
All relevant content is accessible from the entry-level of the system and any selected
content in the second layer gives full access to that topic/class/project/framework.
Exceptions to this on Snerx are /snews and /snuff, as these are UI experiments.
- Standalone Integrity -
All content must be accessible as stand-alone files. Snerx uses in-line CSS so as to
make all pages self-contained and downloadable to be viewed offline. All systems must
adhear to this principle: software made portable, projects zip'd, and pages in-line.
- Flat/Minimal/Material Layouts -
In order to fit as much information as possible into a space and have the space still
be easily parsed by the human eye, it must not look busy or cluttered. This is easy to
acheive by removing borders, frames, outlines, shadows, dividers, and even color-coded
backgrounds. Standardized spacing between all sections, bodies, and workspaces is more
than enough for segmenting content and partitioning your visual real estate. Reduction
and 'flattening' of an interface will always increase its ease of use.
- Two Color Schemes-
While Snerx has multiple color schemes, there are two in particular that should be
implemented into any system. One for optimal visibility in all environments and for
all screens including damaged or low-light screens; this should be the default used
for any important interface and is always grayscale with black in the background,
white in the foreground, and mid-tone grays as highlights (exemplified in /snuff
The second scheme is for obscuring information on a screen; a light flat-tone color
scheme (desaturating the image should return all the same values of gray) makes it
very difficult to read. This acts as a screen-mask and stops people from being able to
cognize the information from a distance unless they maintain gaze for extended periods
of time or have a direct view from a centered position (usually obscured by the user).
An example of the latter, with 'washed' or 'faded' colors is given below.
:: Details ::
An example of a well-laid-out interface is EVE Online's interface
. EVE Online has an
incredibly high learning curve and yet people who have never heard of it before can
visually parse all the information on the screen. All information you could ever want
is displayed on the screen by default - all relevant objects in the area are listed,
all comms channels are listed, all fleet/crew information listed, and windows for
specific tasks or interactions are comfortably fit between the rest with plenty of
space left over to see the 3D-mapping of ships with objective distances.
Additionally, the edges are gapped, made clear for the object-icons to pan into, which
is very useful because it means no objects in the area are ever off-screen. On this,
used by EVE are flat
. Icons and indicators used in compressed visual systems
or systems meant to be highly-parsible (meaning that cognizing the relavent
information is immediate for humans) need a standardization and intuitiveness that
puts it on the level of apodiction. The best example I know for this is /snarl
I'll edit the rest of this later. More examples, more pictures, etc.
End goal is unified interface for Space Force or BuildTheEnterprise.org.
☀ 70°F ∿ 80 | W · • · NW · • · N · • · NE · • · E | 359° ↑ 01.2°
☢··· ☣··\ /⌖100 🚶120