UI UX - User Interfaces / User Experience with ZIM JavaScript Canvas Framework components - zimjs.com

Dr. Abstract explains and defines UI UX user interface and user experience for the HTML Canvas with JavaScript, CreateJS and ZIMjs interactive media framework

ZIM is a front-end framework which means that user interface and user experience are of great importance. Press the MORE link for tips and tricks that let you be both expressive and successful!

Introduction

There are FOUR main sections to our journey through UI UX:

User Interface - Public
User Experience - Public
User Interface - Coders
User Experience - Coders

A quick background: I, Dr. Abstract, have spent the last 30 years working with, studying and teaching interfaces. For example:

1986 - Graduated in Engineering specializing in ergonomics and interface
1996 - Co-created award-winning Understanding McLuhan CD ROM
1996 - Invented forms of interactive advertising for canada.com
1996 - Started the huge site, Dan Zen, with many experimental interfaces
2002 - Won the Canadian New Media Awards for Dan Zen
2002 - Started teaching Interactive Media at Sheridan
2005 - Founded the philosophy of Nodism tied to OOP organization
2008 - Won the Canadian New Media Awards for teaching
2012 - Formed CreativityFramework.com based on Nodism
2015 - Created ZIM with customizable components for Canvas
2017 - Received the Hamilton Arts Award for Media Arts with ZIM

SECTION 1: User Interface - Public

ZIM is a framework for creating interactive media for people (users). Interface is where input and output happens. ZIM provides a set of components for this interaction - see also the many examples on the main page:

The components are very customizable to meet the demands of the interaction and the design of the app. Here is the code for a Button. For discussion of the usability of this code see Section 3 (UI for Coders).

Button(width, height, label, backgroundColor, rollBackgroundColor, color, rollColor, borderColor, borderRollColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, toggleBacking, rollToggleBacking, toggleIcon, rollToggleIcon, toggleEvent, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, waitBacking, rollWaitBacking, waitIcon, rollWaitIcon, align, valign, indent, indentHorizontal, indentVertical, style, group, inherit) Docs

Features of ZIM interfaces:

Care has been taken to make interfaces mobile friendly
ZIM Accessibility makes components readable by screen readers
The expand() method makes the interactive area bigger
Objects can be transformed, dragged, swiped and gestured
Component backgrounds can be changed and animated
Components can be disabled, removed and disposed
Input components dispatch a change event when changed
All component parameters can be styled by type or group
ZIM events can turn any display object interactive
cur() and apply any CSS cusor as well as Custom Cursors
Interface and HUD elements can be made for three.js
Drop Targets have been added to ZIM drag() and List()

SECTION 2: User Experience - Public

Consistency is a very important design consideration. A set of consistent interfaces exists for the box-like world of HTML. This works well for useful information apps but consider the following for more expressive apps:

Variety is the spice of life!
The Canvas is free-form and free of boxes!
HTML components have been the same since 1994
Integrated components can maximize experience
Embedded, natural interfaces can feel real!

With ZIM NIO, we can drag and animate along a path. The path can be user-adjusted which empowers the people! People can gesture pinch, zoom and pan. People can throw things around in a physics world. We see explosions and animated sprites of all forms! The canvas is a magical experience - a wonder place. Within an app we should be consistent but not all interfaces should be the same. We can explore!

SECTION 3: User Interface - Coders

Yes, ZIM is used to make apps for end-users. But another user we are very conscious of, is you - the creator of these apps. For example, the ZIM DUO technique lets you use parameters two ways:

To make a square corner Button, the corner parameter is the 11th parameter:
new Button(null, null, "GO", null, null, null, null, null, null, null, 0);
Alternately specify a configuration object with properties of parameter names:
new Button({label:"GO", corner:0});

Our goal is to make coding with ZIM as easy as possible. Here are some features that help:

SEE - Optional namespace: new zim.Triangle() or new Triangle()
SEE - Chainable methods: new Circle().center().drag()
SEE - Configuration object parameters: new Button({corner:0})
SEE - Style for all DisplayObject parameters
SEE - ZIM Loop - number, array, object, container, collection
SEE - ZIM Frame - fit, full, outside, tag
SEE - ZIM Colors - blue, pink, green, etc.
SEE - ZIM Distill - minify only code used
SEE - ZIM Pick - dynamic parameters
SEE - ZIM Ticker - system ensures single stage update
SEE - ZIM ANIMATE constant to toggle animations
SEE - ZIM DRAGALL constant for drag configuration
SEE - ZIM OPTIMIZE constant for mobile

ZIM can be used with TypeScript. This is no small feat. The Typescript typings are over 3000 lines of class and function interfaces. This allows developers to specify the types of their variables like we do in Java, C#, ActionScript, etc.

/// <reference path="./typings/zim/index.d.ts" />
let x:number = 10;
const frame:zim.Frame = new Frame();
const circle:zim.Circle = new Circle();
circle.color = red; // warning in TypeScript if no color property
As you type you get listing of parameters
TypeScript can be used in Atom, Sublime, etc.

ZIM can be used with NPM (Node Package Manager). Here are links to sample Templates:

ZIM has TextureActives for interactive surfaces in three.js including interfaces and HUDs. Pressing the T key will toggle to the actual ZIM interfaces to let you see the interfaces either way - this helps production.

Sample HUD in three.js - press T to see behind the scene (pictured below)

ZIM scrollable interactive textures used in three.js (pictured above)

SECTION 4: User Experience - Coders

Documentation and resources are very important to coders. Every single ZIM Doc entry has an example. There are links to video tutorials, ZIM Bits, and the source. This has led to reviews like the following:

I've never seen such perfect documentation for a JS library! - Andreas Erni

The examples, videos, documentation and support are tremendous resources that make ZIM shine! - Tou Phim

I have never seen better software documentation anywhere. Zim makes life so easy - Geoffrey Nwachukwu