• PRODUCT

    PRODUCT

  • PRICING
    PRICING

  • HELP
    HELP

  • BLOG
    BLOG

  • APPSTORE
    APPSTORE

  • COMPANY
    COMPANY

  • LEGAL
    LEGAL

  • LOGIN
    LOGIN

  • Workflow Automation

    Workflow Automation

  • AI Assisted Content Management System
    AI Assisted Content Management System

  • Analytics & Lead Generation
    Analytics & Lead Generation

  • Automation Projects
    Automation Projects

  • Browser Extension Apps
    Browser Extension Apps

  • Dashboard Theme Analysis: LN1
    Dashboard Theme Analysis: LN1

  • Data Exchange Automation Tools
    Data Exchange Automation Tools

  • Getting Started With Building Hybrid Apps
    Getting Started With Building Hybrid Apps

  • Izyware Hybrid UX Design Guidelines
    Izyware Hybrid UX Design Guidelines

  • Onboarding New Organizations Using Izyware
    Onboarding New Organizations Using Izyware

  • Quick Visualization and Monitoring
    Quick Visualization and Monitoring

  • Unified Metrics Stream Pipeline
    Unified Metrics Stream Pipeline

  • Legacy Features and Backward Compatibility
    Legacy Features and Backward Compatibility

  • How does the legacy frame architecture work
    How does the legacy frame architecture work

  • Izyware Legacy UI Circus Engine
    Izyware Legacy UI Circus Engine

  • Case Studies and Knowledge Center
    Case Studies and Knowledge Center

  • Angular and React Embedding Guide
    Angular and React Embedding Guide

  • Build and deploy a content distribution app in less than five minutes: Part II
    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 CSS Preprocessors SASS vs LESS vs STYLUS

  • Comparison of node.js test frameworks and utilities: lab, chai, sinon
    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
    Manage and automate your day to day business tools using IzyCloud Tasks: Part I

  • MySql Performance Optimization
    MySql Performance Optimization

  • Onboarding Tutorial: Creating & publishing an app
    Onboarding Tutorial: Creating & publishing an app

  • Rebranding and Customizing Websites
    Rebranding and Customizing Websites

  • Using IzyCloud on Android: IzyCloud Query App
    Using IzyCloud on Android: IzyCloud Query App

  • Technical Resources
    Technical Resources

  • .NET SDKCore IzyWare
    .NET SDKCore IzyWare

  • av-stream README
    av-stream README

  • ElasticSearch IzyWare Data Console Feature
    ElasticSearch IzyWare Data Console Feature

  • End To End Testing
    End To End Testing

  • End To End Testing, Part II
    End To End Testing, Part II

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

  • izy-circus README
    izy-circus README

  • izy-idman-tools README
    izy-idman-tools README

  • izy-pop3 README
    izy-pop3 README

  • izy-proxy README
    izy-proxy README

  • izy-sync README
    izy-sync README

  • IzyIDE README
    IzyIDE README

  • izymodtask readme
    izymodtask readme

  • IzyShell readme
    IzyShell readme

  • ReKey Feature Package README for IzyWare SQL Console
    ReKey Feature Package README for IzyWare SQL Console

  • Single Sign-On (SSO) README
    Single Sign-On (SSO) README

  • Tasks Migration : V5 guidelines
    Tasks Migration : V5 guidelines

  • Users & Groups README
    Users & Groups README

  • V5 Migration : apps/pulse guidelines README
    V5 Migration : apps/pulse guidelines README

  • Container Orchestration
    Container Orchestration

  • Izy Kubernetes Internal Networking Troubleshooting
    Izy Kubernetes Internal Networking Troubleshooting

  • Application Hosting
    Application Hosting

  • Content Publisher
    Content Publisher

  • Domain Registration
    Domain Registration

  • Email Hosting
    Email Hosting

  • Izyware Browser Extension
    Izyware Browser Extension

  • Izyware Deployment Engine
    Izyware Deployment Engine

  • Izyware Session Management
    Izyware Session Management

  • Messaging System APIs and functionality
    Messaging System APIs and functionality

  • Single SignOn
    Single SignOn

  • Integration APIs
    Integration APIs

  • iOS SDK
    iOS SDK

  • Azure and .NET
    Azure and .NET

  • izy-devops
    izy-devops

  • << Getting Started With Building Hybrid Apps
    << Getting Started With Building Hybrid Apps

  • Onboarding New Organizations Using Izyware >>
    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/)