Artworktool User Experience Update
Artworktool has undergone an update that substantially improves its appearance in order to enhance the user experience when accessed via desktop and mobile devices.
The objectives of these changes were:
- Provide a cleaner interface in line with more up to date style trends
- Ensure functions are tablet friendly
- Make designer responsive for tablets and smaller screens.
- Reduce cart abandonment rates by making pricing more prominent within the designer interface.
Style & Layout
Key changes to the overall layout:
[1] Title and saved status showing in top bar.
[2] Help, share, preview and save icons positioned in prominent location.
[2.1] For Signarama (STORE) websites, Add to Cart and Add to Inquiry buttons have been enlarged and style altered to suit the designer better.
[2.2] For Signarama (STORE) websites, the designer opens as a full screen modal to best utilize screen real estate.
[3] Icons are larger for optimal tablet usage and colors have greater contrast.
[4] Commonly used commands have been located in the top navigation bar including new buttons: ‘Copy’ and ‘Paste’.
[5] Faces show in a prominent position in the top navigation. They are always expanded to show the range of faces available for a template and shows a summary number of faces along with details of which face a user currently has active. When multiple faces are available (beyond the screens ability to display them all in one row) arrow navigation is activated to allow users easy scrolling between them.
[6] Product, Design, Image and Total costs are displayed prominently at the top right of the screen. This ensures the customer knows the total cost of their product and artwork at all times. A breakdown of the costs follows:
[6.1] Product Cost: Displays the cost of the product from the product attributes that were selected before entering the designer.
[6.2] Design Cost: Shows only when a product is setup with Canvas pricing (pricing based on sq ft). The Design cost changes dynamically based on the overall design size. If a product has multiple faces, each face’s design size is totaled to display one Design Cost. Editing a design on any face will adjust the Design cost appropriately.
[6.3] Image Cost: Displays the total price of Stock Images used within the design. Each Fotolia image is sold at $5.
[6.4] Total Cost: Displays the total price of 6.1, 6.2 and 6.3
[7] Large artboard area, which can be completely filled with the design when zoomed.
[8] Expanding Layers menu that can be hidden for optimal artboard workspace.
[9] Expanding Zoom panel that can be hidden for optimal artboard workspace.
Help Wizard
Upon entry to Artworktool, the user see’s a 6-step help wizard.
Options to dismiss and re-call the help are available.
Share
Option to share via Google+ is available via the header navigation Share button.
Images - Overview
Enhancements to Images area:
[1] Drag an image to upload
[2] Connect with social media accounts; Facebook, Twitter & Instagram to access images and add them to the artboard.
[3] Add, re-name and organize folders for User Images.
[3.1] User images can be titled and tagged for easy searching.
Images – Placement
[1] Display toggle to change views between a detail and list view.
[2] Image information displays against images when in detail view.
[3] Place button for more obvious placement of images onto artboard.
[4] Place multiple images onto an artboard at once by clicking once on all images required (activating a green tick) and placing them.
Options
All options and defaults are now within the Options area, which is accessible via the left navigation.
New options within this area are:
Shape color – this is the users default color for shapes added to the artboard.
Smoothing – this has been re-positioned from within the freedraw tool.
Line width – this is the users default line width.
Language – Available in Russian.
Zoom
Enhanced zoom controls for:
Zoom 1:1 – shows canvas to size (where possible)
View full canvas – shows entire canvas on the screen (as below)
Zoom slider allows zooming in/out. Example zoomed in fills entire workarea:
By clicking on the zoom pane, users can pan around to move to areas around their design easily when zoomed in.
Layers
Enhancements to layers panel:
[1] Lock mechanism disables ability to edit the layer.
[2] Editing tools are accessible via icon links, clicking on an icon opens the editing pane with the relevant section active.
[2.1] The layer type determines which options are available to click. Eg. A Shape layer doesn’t allow a user to click the ‘T’ for Text tools.
[3] Each layer can be re-named for easy reference.
[4] Multiple layers can be grouped/un-grouped by ticking layers and clicking Group/Un-group Selected.
Layers can be dragged and dropped into a new layer position by clicking on the layer, dragging it into a new position in the list and releasing it.
Editing Layers
Layers are edited via the floating pane that opens upon clicking any of the editing tools from the Layers panel on the right of Artworktool or by double clicking a layer. Options available are specific to the layer that the user had selected e.g. Type tools are only available for Text layers.
If a tool is unavailable for a specific type of layer, it is greyed out such as the ‘Align’ tool in the example below.
Increased size of sliders for ease-of-use on a tablet.
Optimization
A major update to Artworktool’s core Javascript library was completed and allows for easier and faster interaction with the designer, in particular when multiple layers are present on an artboard or template.
This update will handle increased usage and loads more efficiently, enhancing a general users experience by presenting content on the screen at an increased speed. An example of this can be seen by moving a layer around the screen and watching the layer thumbnail update almost instantly.
Templates with 150+ layers were tested to check responsiveness and usability.
