1. Home
  2. WalkMe Mobile
  3. Mobile: Building Content
  4. Mobile: The Campaign Wizard
  5. Mobile: Campaign Design Tips, Tricks, and Best Practices

Mobile: Campaign Design Tips, Tricks, and Best Practices

Updated on January 27, 2019
Download PDF

You may wonder how to optimize your campaigns’ user interface and user experience. This article will teach you about optimal element placement and campaign style.

Legacy WYSIWYG (WalkMe Mobile SDK v1.13.0 and lower)

Understanding elements

Every item under CAMPAIGN ELEMENTS in the WYSIWYG corresponds to an element that currently sits on your app screen:

You can select one of these elements for placement and customization either by clicking it in the CAMPAIGN ELEMENTS section or on the app screen itself.

You can move all of the elements on the screen together by clicking CANVAS under CAMPAIGN ELEMENTS and dragging the highlighted section around the app screen.

Campaign design tips and tricks

Moving elements forward and backward

Some elements can be moved forward and backward with respect to other elements on the screen (similar to z-index in HTML). You can do this in one of two ways:

  1. Click the dropdown menu to the right of the element and select Move Forward or Move Backward; or
  2. Right click on the image itself on the app screen and select Move Forward or Move Backward:

This is helpful in situations where you assign a CTA trigger to an element that sits at the same location on the app screen as another element (e.g., a shape sitting on top of an image).

Scaling and docking the canvas

You can resize most elements at will, either using their settings-panel’s size fields, or by clicking the element’s border on the app screen and manually drag-resizing.

When designing for various devices and device-sizes, you must locate and set the size of your elements with this in mind. Use the red guidance lines on the app screen to understand when your elements are centered and/or docked to the sides of the app screen.

For example, when an element (in the following image, the CANVAS element) is centered vertically and horizontally, you will see two intersecting red guidance lines:

If an element is centered vertically and horizontally, it will appear in the center of the app screen regardless of which device is selected in the PREVIEW DEVICE panel, but it may be cut-off if the size of the content is too large to fit on a given device’s screen.

Previewing content on end-user devices

An important part of campaign content-building is ensuring your campaign will provide a pleasant UI regardless of device OS and size.

PREVIEW DEVICE enables you to simulate the campaign’s appearance on small, medium and large Android and iOS devices, in both portrait and landscape orientations:

Customizing the campaign’s back cover

With Mobile SDK version 1.7.0 and up, you can customize the back cover of your campaign (or the area that sits behind your campaign while the campaign is displayed).

You can designate the back cover’s color, opacity, and associated CTA (this last one only for ShoutOuts):

The default values are as follows:

  • Color: black;
  • Opacity: 0.7;
  • CTA: MAYBE.

New and Improved WYSIWYG (WalkMe Mobile SDK v1.13.1+)

Understanding elements

Every item under OBJECTS in the new WYSIWYG corresponds to an object that currently sits on your preview device screen:

Aside from the Canvas object, the OBJECTS tree objects are ordered by their layer’s z-index: The front-most object in the WYSIWYG is the top-most in the OBJECTS tree, etc.

You can select one of these objects for placement and customization either by clicking it in the OBJECTS tree or on the preview device screen itself.

You can move all of the elements on the screen together by clicking Canvas in the OBJECTS tree and dragging the highlighted section around the preview device screen.

Additionally, you can move any object (canvas included) by selecting it in either of the ways mentioned above and using the up/down/left/right arrow keys on your keyboard.

Campaign Design Tips and Tricks

Moving elements forward and backward

Some objects can be moved forward and backward with respect to other elements on the screen (similar to z-index in HTML). You can do this in one of two ways:

  1. Navigate to the object’s SIZE & POSITION tab and click one of the icons to the right of the Reorder section:

    • In order of appearance, the icons mean 1) move to the front-most layer, 2) move forward one layer, 3) move backward one layer, and 4) move to the back-most layer.
  2. Either right click on the object, or click its blue tab on the preview device screen and select one of the layer ordering options:

Previewing Content on end-user devices

An important part of campaign content-building is ensuring your campaign will provide a pleasant UI regardless of device OS and size.

Preview, located in the new WYSIWYG, enables you to simulate the campaign’s appearance on small, medium and large Android and iOS devices, in both portrait and landscape orientations:

To toggle between portrait and landscape orientations, click the toggle button located over the preview device screen:

Object arrangement in the canvas

Creating beautiful campaigns with precise design is easier than ever using the two object arrangement features:

  1. Object alignment: Align multiple objects with each other horizontally or vertically; and
  2. Object distribution: Create equal spacing between objects by distributing them horizontally or vertically.

To select the objects you want to align or distribute with each other, hold the Command (Mac) or Ctrl (PC) key down and click on the object(s) with your mouse:

Undo and redo

No need to hesitate before making changes to your campaigns’ designs! Any change you make while editing can be undone by either clicking on the Undo button or typing Command + Z (Mac) or Ctrl + Z (PC).

If you regret undoing something, you can re-do it by clicking Redo or typing Shift + Command + Z (Mac) or Shift + Ctrl + Z (PC).

Keyboard shortcuts and actions

You can now use your keyboard’s arrow keys to move the canvas and the objects inside it with more sensitivity than when you use your mouse.

In addition, you can use all of these keyboard shortcuts to save time:

 

Action Mac PC
Duplicate object Command + D Ctrl + D
Delete object Del Delete
Undo Command + Z Ctrl + Z
Redo Shift + Command + Z Shift + Ctrl + Z
Bold text Command + B Ctrl + B
Italic text Command + I Ctrl + I
Underline text Command + U Ctrl + U

Context menu

Quick and common actions are available by right clicking on an object or clicking on its blue border tag:

Saved preferences for preview device

Your selection of on which device to preview your campaign in the WYSIWYG will now be preserved for the next time you open the same campaign. This only works if you open the campaign on the same computer.

Working with the OBJECTS tree

Rename objects

You can now rename objects in the OBJECTS tree to give them meaningful names that will make it easier to identify them:

Hover on objects in tree

Hovering on objects in the objects tree will now highlight them in the WYSIWYG so it’s easier to find each object:

 

Campaign Design Best Practices (Both Legacy and New WYSIWYG)

When building campaigns in the Campaign Wizard, follow these best practices where applicable:

  • Model your campaign with the smallest device(s) the end-users will use in mind;
    • If there is insufficient space on an end-user’s device, WalkMe content may not be fully visible;
    • Consider segmenting your campaigns’ end-users by their device-sizes.
  • The most intuitive, and least error-prone, placement for campaigns on end-user device screens is either aligned center or docked to one side;
    • if you’d like a campaign to span the entire width or height of an end-user device screen, stretch it in the WYSIWYG editor until the size of the Canvas Element reads 100% along the axis you’re stretching it on.
  • If you must support landscape mode (in addition to portrait mode), perform QA frequently as you design and size and place your elements creatively with this goal in mind.

Was this article helpful?

Related Articles