ZIM - UI UX - User Interface / User Experience with ZIMjs components for JavaScript and HTML Canvas with CreateJS


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:
  1. User Interface - Public
  2. User Experience - Public
  3. User Interface - Coders
  4. 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

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:
  1. 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);
  2. 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) and Browserify, etc. Here are the instructions:
  1. Assuming NodeJS installed with NPM
  2. Open Node command prompt and get Browserify:
  3. npm install -g browserify
  4. Get ZIM (which gets CreateJS too):
  5. npm install -g zimjs
  6. Change to the node_modules/zimjs/ directory and:
  7. browserify code.js -o bundle.js
  8. run code.html in browser

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

Learning ZIM and using ZIM to learn to code is extremely well supported. Here are some resources:
  • SEE - ZIM Learn - site section for learning
  • SEE - ZIM Teach - site subsection for teaching
  • SEE - ZIM Skool - lessons for high school
  • SEE - ZIM Kids - theory and workshops for kids
  • SEE - ZIM Badges - Art, App and Physics Tutorials
  • SEE - ZIM Tips - latest techniques in ZIM
  • SEE - Code Zero - video intro to coding
  • SEE - What IZ - video series of definitions
  • SEE - ZIM Capture - video series on ZIM
  • SEE - ZIM Bubbling - video series of new ZIM features
  • SEE - ZIM Explore - explorations in code
  • SEE - ZIM Docs - expandable documentation
  • SEE - ZIM Bits - 64 code techniques
  • SEE - ZIM About - site section introducing ZIM
  • SEE - ZIM Code - site section with code resources
  • SEE - ZIM Examples - site section of examples
  • SEE - Why ZIM - introduction video for ZIM

MORE
Here are some ZIM Components and Interfaces!
open links in new tab

Buttons, Sliders and Dials, oh my! Components
Buttons, Sliders and Dials, oh my! Components
ZIM Accessibility for Screen Readers
ZIM Accessibility for Screen Readers
ZIM List Component - Accordion Setting
ZIM List Component - Accordion Setting
CSS for the Canvas with ZIM Style!
CSS for the Canvas with ZIM Style!
Adaptive and Responsive Design with ZIM Layout Class
Adaptive and Responsive Design with ZIM Layout Class
ZIM software Keyboard by Frank Los
ZIM software Keyboard by Frank Los
ZIM ColorPicker - configurable
ZIM ColorPicker - configurable
ZIM Pizzazz 1 Backgrounds and ZIM Pizzazz 2 Icons
ZIM Pizzazz 1 Backgrounds and ZIM Pizzazz 2 Icons
ZIM Pizzazz 1 Backgrounds and ZIM Pizzazz 2 Icons
ZIM Pizzazz 1 Backgrounds and ZIM Pizzazz 2 Icons
ZIM Pizzazz 1 Backgrounds and ZIM Pizzazz 2 Icons
ZIM Pizzazz 1 Backgrounds and ZIM Pizzazz 2 Icons
ZIM Pizzazz 3 Animated Patterns
ZIM Pizzazz 3 Animated Patterns
ZIM Pizzazz 4 Paths - Squiggles and Blobs with Beziers
ZIM Pizzazz 4 Paths - Squiggles and Blobs with Beziers
ZIM Frame to scale ZIM to windows and tags
ZIM Frame to scale ZIM to windows and tags
ZIM Layer for nested transforms - Head Example
ZIM Layer for nested transforms - Head Example
ZIM NIO Corners for shapes and components
ZIM NIO Corners for shapes and components
ZIM Tile with spread and squeeze
ZIM Tile with spread and squeeze
The powerful ZIM Animate - see the ANIMATE constant too!
The powerful ZIM Animate - see the ANIMATE constant too!
GEN-PEN featuring ZIM List and Organizer
GEN-PEN featuring ZIM List and Organizer
Loading and Saving Images with a Meme App
Loading and Saving Images with a Meme App
Apps that play with Interfaces - Vault 6 and Vault 7
Apps that play with Interfaces - Vault 6 and Vault 7
An abandoned App to make Interfaces ZIM Snips
An abandoned App to make Interfaces ZIM Snips