PRICING

HELP

BLOG

APPSTORE

COMPANY

LEGAL

LOGIN

AI Assisted Content Management System

Analytics & Lead Generation

Automation Projects

Browser Extension Apps

Dashboard Theme Analysis: LN1

Data Exchange Automation Tools

Getting Started With Building Hybrid Apps

Izyware Hybrid UX Design Guidelines

Onboarding New Organizations Using Izyware

Legacy Features and Backward Compatibility

How does the legacy frame architecture work

Izyware Legacy UI Circus Engine

Case Studies and Knowledge Center

Angular and React Embedding Guide

Build and deploy a content distribution app in less than five minutes: Part II

Comparison of CSS Preprocessors SASS vs LESS vs STYLUS

Comparison of node.js test frameworks and utilities: lab, chai, sinon

Manage and automate your day to day business tools using IzyCloud Tasks: Part I

MySql Performance Optimization

Onboarding Tutorial: Creating & publishing an app

Rebranding and Customizing Websites

Using IzyCloud on Android: IzyCloud Query App

Technical Resources

.NET SDKCore IzyWare

ElasticSearch IzyWare Data Console Feature

End To End Testing

End To End Testing, Part II

frames and nav (ui/w/shell/navmulti) README

izy-circus README

izy-idman-tools README

izy-pop3 README

izy-proxy README

izy-sync README

IzyIDE README

IzyShell readme

ReKey Feature Package README for IzyWare SQL Console

Single Sign-On (SSO) README

Tasks Migration : V5 guidelines

Users & Groups README

V5 Migration : apps/pulse guidelines README

Container Orchestration

Izy Kubernetes Internal Networking Troubleshooting

Application Hosting

Content Publisher

Domain Registration

Email Hosting

Izyware Browser Extension

Izyware Deployment Engine

Izyware Session Management

Messaging System APIs and functionality

Single SignOn

Integration APIs

iOS SDK

AWS SDK

Azure and .NET

<< Getting Started With Building Hybrid Apps

Onboarding New Organizations Using Izyware >>

Izyware Hybrid UX Design Guidelines

This article will describe the Izyware Hybrid UX Design Guidelines. Unlike typical UX design for desktop, mobile and web apps the major challenge with Hybrid UX is that they interact inside the context of a thirdparty application with its own user interface. Thus the amount control and flexibility over the canvas and the user interaction surface is substantially constricted compared to a classic UX design effort.

Introduction

At the core, any UI design should be based on how the minds percieve, learn and act and there are no rules written in stone. Therefore, an effective UX should be designed with the right principles in mind.

Semiotics and Hermeneutics of Product Design

It is a well known fact in socialogy, political science and advertising industry that framing perspective organizes experience and guide action. Frames are organizing principles that are socially shared and persistent over time, and that work symbolically to meaningfully structure the social world. As Murray Edelman writes: "The social world is a kaleidoscope of potential realities, which can be readily evoked by altering the ways in which observations are framed and categorized.".

Each digital product can be thought of as a narratives and interpretation which by focusing on one aspect of an event and presenting it to the user it constructs reality. This construction operates by making certain aspects of events more salient than others. This salience then ÏŸÁ ÏŸá ÏŸÁ Ï±ÁЙϟώϠტframesÏŸÁ ÏŸá ÏŸÁ Ï±ÁЙϟώϠЙ an event and provides a reference point for users in which all subsequent information is judged upon.

Suggested Techniques

The Hybrid app does not neccessarily need to conform to the hosting app (that would be very diffcult considering the varierty of hosts). What is more important is to have internal consistency whithin its own frame (meaning everything looks perfectly measures and polished, etc.). When that happens the psychological effect is 'dazzle' and 'shine'. It will appears shiny and cleaning. every pixel matters* in the sense that as soon as one pixel is off, the overall picture will not look shiny.

Non intrusive method for capturing users's attension. Once the focus is on the hybrid app, they wont see* the hosting app

• Allow quick launch and easily dismissable features.
• Should be draggable/movable/collapse (make users feel that they are in control)

Should not change when scrolling, because scrolling is percieved to be related to the hosting app. The toolbar staying at the top will create the perception that the toolbar is part of the frame*. In other words, to achieve consistency and the cognitive effect, it should visually be percieved to be an extension of the master frame for the hosting app (i.e. the browser).

• Should only become visible in relevant context. i.e. the form filler would only be visible when on relevant site. Otherwise, let the user decide to make it visible.

Psychological Model

Human perception is highly affected by the expectations. (we percieve what we want and expect) and we are pattern seeking individuals. The factors that define this are of course the past experiences (which is defined by the target audience) but also the context and the goals.

• Images are better than words (advertising anyone?)
• Visial focus: Recognition that our eyes has a focal point with good vision and a peripherial vision with bad quality.

- Proximity

- Similarity

- Continuity

- Closure: The mind tends to integrate pieces into a whole object (reference from the Slights of Mind)

- Symmetry

Mental focus: Defined by context and goals. The mind will not notice things that are unrelated to its focus point. So even though things are there the mind may not neccessarily see* them.

• Mind is pattern seeking. That is the reason why Visual hierarchy is immensly helpful (both for organizing text as well as user interfaces).

Interpretation of Existing Design Guidelines

Below, we will discuss the following principles (credit: Jakob Nielsen) in the context of a hybrid app design and highlight the challanges that is faced:

User control and freedom

The ability for the user to be in control is perhaps the most critical challenge of building effective interfaces for hybrid apps. Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. In addition they learning process is accomplished by playing around with the UX and to a certain extend making mistakes. So,

• Strive for consistency
• Design task-flows to yield closure
• Permit easy reversal of actions (i.e. Undo)

Make the users feel* that they are in control

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Use real world metaphors: Match between system and the real world

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Predicability: (Consistency and standards)

Users should not have to wonder whether different words, situations, or actions mean the same thing. The particular challenge with the hybrid apps is that the user is faced with conflicting UI paradigms of the hosting app and the hybrid app:

• Affordance: The UI should suggest how to use it.

The solution: the UX for the hybrid app needs to be percieved as an extension of the frame for the hosting app. In the case of the hosting app being a web page, the hybrid app should look like an extension of the browser.

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

(Read full article on preventing user errors.)

Recognition rather than recall

Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

(Read full article on recognition vs. recall in UX.)

Flexibility and efficiency of use

Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Actionable Feedback: Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

Quick Note Regarding Grids

The best way to design grids that allow create, edit and delete on their items is to:

• Make the grid navigation buttons to alter the frame state: i.e. offset is in the frame and it makes it addressable

Add, Delete, Edit should be implemented as new frame paths. When they are done, they will just got back* which would be the prior grid position

• implementing these actions as frame_navigation items will ensure that the buttons are hidden properly, the Done/Cancel buttons are consistent and they can be launched from the grid context.

Some designs try to modify the grid state inline and skip the refreshing of grid with DB call. That argument is bogus because the maximum benefit one might get by avoiding refresh would be the total number of visible grid items which in comparison with big data (which is where performance might become an issue) is negligible. Most designers fall into this trap because they want to preserve the current position on the grid, which our solution fixes.

Are solution would demand:

• grid be made more robust to handle potential disruptions in the offset/position

frame support back item* (i.e. what was the last path/state it came from i.e. /grid/)