User Experience

UX is a design process adopted to build meaningful products to create relevant experiences to users. This process contains the end-to-end design of a product that includes branding, design, usability, and functional aspects of a product.

User Experience is a design process is often interchangeably used with other processes such as UI Design or Usability. User Interface and Usability are significant aspects of UX design, but they are subsets of it as UX design covers plenty of other areas. The typical UX design process covers the end-to-end process of acquiring and combining products that cover significant aspects such as design, branding, function, and usability. Even before a device is in the hands of a user, the user experience is Over.

UX designers not only focus on creating useful products but also on products that give significant pleasure, fun, and efficiency. In addition, there is no specific definition for user experience; therefore, the User experience is an experience that meets user needs in a specific context where they use the product. Let’s look at different key factors of the User experience (Figure 4-3).

Why, What, and How

Now we look at why, what, and how as part of a UX design (Figure 4-4).

Generally, a UX designer considers the why, what, and how of a product’s use.

• The “Why” factor involves user motivation, values, and views for product adoption, which could relate to a task that a user performs associated with ownership and use of the product.

• The “What” factor focuses on product functionality.

• Finally, the “How” factor deals with the accessibility and aesthetics of products.

UX designers start with the Why factor before defining the What and then, finally How factor, to build products with an awesome user experience. In software product design, one must make sure that a product’s substance comes through an existing device and should offer a seamless, fluid experience.

UX Design Is User Centered

UX design covers the entire user experience journey as it is multidisciplinary. Typically, the background of a UX designer comes from fields such as visual design, programming, psychology, and interaction design. When you are designing for humans, potential human challenges such as reading small text, colors, sizes, and others are taken into consideration. The job of UX designers is to perform user research, create personas, designing wireframes and interactive prototypes as well as testing designs. Such tasks are likely to vary from one company to other, but they want designers to be user focused, advocate for users, and always keep the user as the focal point for all design and developmental efforts. Consequently, most users work in such a way that all relevant needs of users are addressed. To perform a UX assessment and conclusion, user-centric design steps shown in Figure 4-5 can be followed.

User Interface

Now we are at the second stage of the modern development cycle called User Interface (UI). UI is a place where a user interacts with the design. Control panels, dialog boxes, faces, and voice-connected faces are some examples of Graphical User Interfaces (GUIs). Engaging users with 3D design using body motions are an example of a gesture-based interface. UI is an essential part of UX. Typically, a user gives feedback on design, likeability, and usability. With a higher user focus, designers can build highly usable and efficient designs. Understanding different user scenarios will make designers aware of future flaws and make design very robust. Ideally, UI design should not be device specific, but they should focus on how a user interacts with a design. UI should be designed in such a way that all possible features can be observed quickly, and it should be readily used by users.

If a user experiences a product’s features, then UI is diligently developed. Frequently confused with UX design, UI design deals with the surface design of a product and overall feel of a design. Also, UX has a scope that covers the total spectrum of the UI (Figure 4-6). One analogy is to imagine UX design as a car with UI design as the leg room. Normally, in GUIs, to convey your organization’s values and maximize usability, you should create pleasing aesthetics and animations.

Following these UX and UI steps, development teams can use out-of-the-box SharePoint Online features such as features webparts and the Office 365 tool that we explored in the first two chapters of this book. Further, they can customize components using code. With such UI development standards, development will hand over portals to a User Acceptance Team (UAT), who will perform tests under valid test cases and post implementation of UAT feedback, the system will go live.

To understand UI, let’s do an assessment of the portal by performing UI assessment. In the below examples, we have created a dummy SharePoint portal, over which we will perform UI assessment. In the below images, the numbered text represents the assessment and is followed by its answer.

Scenario 1

This scenario deals with font size and color scheme chosen, which are affecting the overall design (Figure 4-7).

Scenario 2

This scenario deals with unnecessary navigation, white spaces, and margins, as shown in Figure 4-8.

Scenario 3

It deals with space (Figure 4-9).

Scenario 4

It deals with buttons and features (Figures 4-10 and 4-11).

Note

In the comments in Figure 4-11: Bootstrap means development done using open source Cascaded Style Sheet (CSS) framework, and insufficient coding standard refers to the static coding method and not the dynamic method.

Scenario 5

It deals with features (Figure 4-12).