Let Us Comprehend CUBI—A User Experience Model Part 5

Interaction in CUBI ModelPreviously we have explored the components of CUBI model for UX designers for web and mobile software products. In second part, we have grasped the content layers’ functionality. In third part, it were user goals while in fourth part, we had some knowledge about business goals. Now in this post, we will look finally at the fourth component of the CUBI model and its interaction. However, user interaction designing is crucial in modern high-end web and mobile landscape because only interactions make product live and exert the best user experiences in our highly intricate software designing projects.

Just like other components, user interactions has four layers to consider when incorporating it in the UX designs. Those layers are patterns, systems, devices, and humans. Let’s see how they act in the UX designing.

Interactions with Patterns

We know very well that UI design consists of various UI elements and most of them are the parts of graphics or layout designs. Therefore, it is natural that design patterns have greater impacts on the interactions of users hence on the UX designs. Apart from buttons, there are headers, menus, maps, calendars, video, audio, images, etc. which are taking parts in various interactions and responsible for user experiences at the end.

Interactions with Systems

Web and mobile applications are creating their own system and running on the various operating systems as well as devices using its hardware, software, and custom resources at a capacity. For instance, any software on web and mobiles may have navigation system, workflows, screen flows, feedback giving and receiving systems, notification systems to interact with internal and external components. These all are mean to help end-users to go ahead to achieve their intended goals with our products.

There is nature of the system such as static or dynamic may decide the interaction designing. At other hand, your software system will define the CMS, e-commerce, and other system software integration with a set of capabilities and limitations.

Interactions with Devices

We are living in fragmentation era in terms of computing devices. Therefore, it is mandatory to beat challenges of multi-screen designing for better UX in all mobile and web software products. Our client/targeted devices may have fragmentation issues with screen size at first place, form factors like smartphones, tablets, desktops, laptops, kiosks, terminals, wearable devices, appliances, and many others at second place.

The biggest challenge for UX designers with devices is various gestures to interact with them like pointing devices/mouse, touch gestures with fingers, thumbs, and other body parts, body gestures with just movements, accelerometer like hardware gestures, geo-locations, and use of camera are some instances to consider during UX designing and interaction designs in particular.

 

Interactions with Humans

After all, we are designing UX for our end-users, and in most the cases, they are human beings. Therefore, human interactions with the product designing like formal, informal ways of interactions, sometimes personal or interpersonal or social interactions define the UX design of the software products at detail level.

 

In simple words, we can say that a set of various patterns provided in a system is responsible for UX and such system running on various devices trigger the human interactions with the product. If you want to get some clue of successful UX designs using CUBI model, you have to explore our portfolio and consult our designers for web and mobiles.

 

 

Author Bio:

Shoaib Marfatiya is an eminent writer in web development industry and its verticals. He has contributed a lot by throwing light on very intricate issues of web and mobile development community.

Advertisements

Let Us Comprehend CUBI—A User Experience Model Part 2

Content Layer in CUBI Model for UXWe have realized the pains of the UX designer due to lack of suitable model or framework to work on in the previous part 1. Moreover, we have seen that why we need CUBI model and what its ultimate purposes or benefits to the modern designers for the better UX? According to our CUBI model content is one of the core parts among the four components.

Content Layer

During the designing process for UX when we are going to incorporate content in the project do several activities and if we are going to depict those activities in the layer forms, we can place content types next to the core of content presentation. Then next layers would be content models, content treatments, content methods, and content architecture. Let’s check them one-by-one in this series.

Types of Content

Initially content has only one or two forms like texts and images in early web era. Today the types of content has all multimedia formats optimized for the web such as audio, video, graphics, data tables and data presentations/chart/graphs, and documents of many unimaginative formats. The more interesting thing is that these variations in content types are not stick with some standalone formats, but there are enough opportunities to combine available formats in various combination creatively and contextually to solve our problems of designing and UX.

For instance, infographics have super combinations of text and images where designers have free reigns to add data visualization techniques and illustration to go on storytelling styles. Pinterest like social media is solely based on such modern variants of the content types and their combinations.

Models of Content

As we have seen above that various combination of content are in use and if we arrange them logically, they become content models. In above example infographics is a sort of model. Similarly, recipe in cooking app or alike apps is a model consisting of different content including texts as instructions, ingredients as data, images of food or ingredients or food, and video describing the process are various content types in it.

Effects on Content

We treat content very different ways from screen to screen or apps such as we apply visual styles like 2D/3D effects on the images/photos to bring good aesthetics. Texts may have unique personality through various text styles. Graphics may have opportunities to reflect brands or personality through theme creation. Thus, UX designers have to learn and follow various content treatments feasible under the umbrella of contemporary styling practices or content treatments.

Methodology of Content

We can make content more interesting hence engaging through various presentation methods of content such as storytelling, metaphors, analogy, scenario creation, symbolism, and many other creative ways.

Architecture of Content

We know if all content types, models, methods, and effects are not in an organized manner or follow a definite structure, we can’t get good UX or solve the website’s problems/client’s problems. Therefore, information architecture or content architecture has great places in the web or mobile designing.

If you like to see the best examples of the roles of content in UX, please check the portfolio of Lujayn carefully.

Author Bio:

Shoaib Marfatiya is an eminent writer in web development industry and its verticals. He has contributed a lot by throwing light on very intricate issues of web and mobile development community.

Working with and Building Modal Windows in Web Design Part 1

Summary:

Modal windows are offering extra spaces on the screen without intimidating user experiences if designed smartly. No doubt, making its semantic is the need of moment. Therefore, let’s check the best practices and trends for working with modal windows in your web design project.

Intro:

In web design whether for static or responsive websites, you need to take care of readability, usability, accessibility, and functionality during entire designing and programming process. In due course, organization of information architecture along with design layout is crucial and demanding a bit experiences as well as expertise.

At present, most of the websites are business oriented and highly relying on online identity to accomplish their critical tasks or processes of the business. Therefore, intricacy in design and functionality is natural. Majority of clients and their web developers are screen real estate hungry. They constantly try to include maximum info in minimum space. Thus, their trade-off with layout blocks and responsive design become more complex and force them to find out innovative ideas to justify their content needs.

Technically, we have innumerable GUI elements and structures to organize our ever-increasing content needs. For instance, jQuery-based sliders, Ajax based tabs, and simple pop-ups or modal windows through programming. Among these, modal windows have certain advantages to do off-canvas designing for web and mobile platforms.

Advantages of Modal Windows

Let me list those advantages in brief just to mention:

  • Modal windows are quite smaller UI element in most of the cases so save space
  • It is floating over the existing page so you need not to create special space for them in your layout, just give links or CTA UI element to pop it up
  • It never requires loading of entire page and simulate the Ajax like functionality so end-users like them so you can consider the modal window as improved usability step in your web designing
  • You can move modal window simply by dragging it on the existing page so offer great convenience for users
  • As modal windows are part of off-canvas design, you can add them in multiple occasions and in as many as you need, of course, don’t exceed here too

Contextual Usage of Modal Windows

No doubt, modal windows are excellent structural UI elements, but they are not applicable on all sorts of content or media so be careful while incorporating in your UI designs. Here I am going to listing and depicting where and when modal windows elements should use and not.

For Lightbox

In these days, our images and videos are of large to extra-large size. Therefore, incorporating them on live web page or UI prove costly and strenuous for layout designers. If we use lightbox for images and videos we don’t have to load or reload web page frequently and can reduce the loading burden until lightbox is not opened. You can use thumbnails of images/videos at linking UI element instead of mere text link or simple button. Thus, you can give ideas of the content before clicking it.

Moreover, you have many options to highlight your content of lightbox in modal window design. For instance, you can blur the background of the rest of screen against the lightbox so your visitors/users can easily see the image details or watch video without distractions. Workings with background of modal windows are easy in styling so you can show your creativity freely.

Another usage of lightbox is converting modal windows into the image galleries. Here you can use auto-sliding or manual next-previous buttons to the lightbox to give best user experiences.

There is much other usage of modal windows in web or mobile UI designing, but we will check them in the next part of this series.

 

Author Bio:

Shoaib Marfatiya is an eminent writer in web development industry and its verticals. He has contributed a lot by throwing lights on very intricate issues of web and mobile development community.