UX Design -- Updated 2018/10/28
Back 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.
Arch Antium Rice
:: 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, the icons 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.
Sniph GUI ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ ________________________________________________________________ ☀ 70°F ∿ 80 | W · • · NW · • · N · • · NE · • · E | 359° ↑ 01.2° __________ __________ ☢··· ☣··\ /⌖100 🚶120