A Brief Introduction of Affinity Designer

Introduction

Affinity Designer came out in 2014. It features a set of smooth, fast and precise graphic design tools. It has been improving and adding more interesting functionalities in 4 years. Now, it can be not only an equivalent but also a strong competitor of Adobe Illustrator. As an interaction designer, we might also want to create some graphics to make the presentation more visually appealing. For instance, a personal picture could be a cartoon character which would give the audience more impression. Here I am introducing some of the interesting features of the app that could be helpful for creating user interface.

Selected Features

There are a few tools of Affinity Designer which I like the most. These tools give the app a very different user experience compared to Adobe Apps.

1. Selection Tool

Every graphic design app has a selection tool which lets you select the object on the canvas. But most of them do not really have a good user experience. Usually, you can select by either single-clicking on any object or dragging the mouse to select multiple objects. In Sketch and Illustrator, when you want to select some objects partially covered by another one, you have to be really careful and make sure you are not touching the one you do not want to select, or you have to select them one by one by pushing shift. In Affinity Designer, you only select the objects that are fully covered by your selection box which makes the selection much easier.

 

2. Vector & Bitmap Layers

Users can do both bitmap and vector graphics on one canvas in Affinity Designer. You can create a vector layer or a bitmap layer. You can add layer patterns to vectors just like what you can do to Photoshop layers. So it is easy to give a vector layer a realistic look without using multiple apps. You can switch between the vector and bitmap toolsets by one click at will. And the app keeps smooth when you work on either the bitmap or vector layers.

 

3. Preset Shapes

There are a bunch of preset shapes on the tool list. You can simply use them to create a compound shape with only one action. You can also change the attributes of the shapes after you create them. You can either adjust the shapes directly on the canvas with the selection tool or change the numerical value on the attribute bar.

4. Advanced Grids and Snapping Tool

In Affinity Designer, there is a variety of preset grids which also allows you to change the attributes. You can turn on the snapping tool to allow objects to automatically snap to the midpoints, grids, objects or any other related elements. For example, with the isometric grid and the snapping tool, you can easily create parallel perspective graphics.

5. Adjustable Stroke Pressure

You can change the pressure of the curve’s stroke. This subtle function allows you to make the vector graphics look like hand-drawn by carefully adjusting the strokes. The pressure difference can change the stroke weight as well as the opacity. A smart use of the function can help you add some interesting effects.

6. Friendly Shortcuts

Unless some design apps which always try to be different from those “conventional” Adobe system, Affinity Designer uses a very user-familiar set of shortcuts. It tries to make the shortcuts as simple as possible so the users would not need to spend too much time to learn it. Plus, Photoshop users will get used to it immediately because most of them are not only similar to Photoshop but even simpler. For example, if you want to duplicate an object, just push Command+J (or Ctrl + J on Windows). If you want to duplicate the last action, also Command + J. The simplified actions give users a good user experience.

7. No Subscription

Although it does not have a cloud function as Adobe Suite, its low price can also be a huge advantage. Only $50 for a permanent use.

Expectations

There are still a few aspects of the app that are expected to be improved. Affinity Designer is not plugin-friendly now. Once it can support plugins as Sketch and Photoshop, it will definitely be more efficient. For example, it would be great if the artboard could be directly uploaded to Invision. Also, it is not perfectly adaptable to Photoshop and Sketch. there are many export options, but sometimes the export function does not work perfectly. For example, when exporting to .psd, the text layer could be separated into several small layers and not editable sometimes. When you copy an object from Sketch and paste in Affinity Designer canvas, there could be some unexpected objects attached to it.

Overall, Affinity Designer is a great emerging design tool. As a designer and a user, I would love to see more competitions in the design software industry which can bring a better user experience, therefore, improve my working efficiency. Along with Affinity Photo and Affinity Publisher, I believe the Affinity Suite will get better and better.

Principles of Web Accessibility

Image result for WCAG

According to WHO, about 15% of the world’s population lives with some form of disability, of whom 2-4% experience significant difficulties in functioning. When a product is being created, the usability and accessibility for all potential users are important. However, most products are needed by not only abled people but also disabled people, that is why the accessibility should be brought to a high priority when designing the product. Especially for UX designers, the accessibility should be considered more carefully when making websites.

There are a lot of accessibility principles around the world including laws and policies of different countries. For example, the section 508 of the US, which was issued in 1973 and lately revised on January 2017, is a law applying to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508, Federal agencies must give disabled employees and members of the public access to information that is comparable to the access available to others. A lot of laws and policies related to the web reference the standards of Web Content Accessibility Guidelines (WCAG) which is published by World Wide Web Consortium (W3C) with its Web Accessibility Initiative (WAI) endorsed by The White House and W3C members.

WCAG 1.0 which was published on May 1999 is a set of guidelines for making web content more accessible to people with disabilities. The latest version WCAG 2.1 was updated on January 2018 based on WCAG 2.0 published on December 2008.

In WCAG, three levels of conformance are defined that are A (lowest), AA, and AAA (highest) in order to meet the needs of different groups of people and different situations. I am using a simple example to demonstrate these three levels. If a time-based content (video & audio) is only video and only audio, it is considered a level A (Fig. 1); if the content has a prerecorded caption, it is still a level A (Fig. 2); if the content has live/in sync caption, it can be considered a level AA (Fig. 3); if the content has prerecorded sign language along with it, it can be considered a level AAA (Fig. 4). One thing worth mentioning is that even the content that conforms at level AAA will not be accessible to individuals with all types, degrees, or combinations of disability, particularly in the cognitive language and learning areas.

 

Fig. 1

Fig. 2

Fig. 3

Fig. 4

 

WCAG has very detailed principles of accessibility. For UX design, these key points of WCAG below are useful for making the content on the web more accessible. I try to use examples to explain each principle.

1. Perceivable information and user interface

a. Text alternatives for non-text content

The purpose of the text alternatives is to provide an equivalent user experience for disabled people. The text can be presented in varieties of ways such as being read aloud or displayed on braille devices.
For example, an appropriate text alternative for a search button would be “search” rather than “magnifier” (Fig. 5).

Fig. 5

 

b. Captions and other alternatives for multimedia

The text transcripts, description, or sign language can provide an alternative to the audio content.
The caption or sign language in the video is a good example (Fig. 5).

Fig. 6

 

c. Create content that can be presented in different ways.

The structures in the content shouldbe marked-up properly; the sequences of information or instruction should be independent of any presentation; browsers should provide settings to customize the presentations.
The automatic reader mode on Safari of iPhone is a good example of the different ways of presentation (Fig. 7).

Fig. 7

 

d. Make content easier to see and hear.

Do not use color as the sole way to convey information; use sufficient color contrast; use resizable text up to 200%; make audio and video pausable and make volume adjustable.
I created a heat map as the example. People with normal eyes can easily distinguish different colors on the map. But for people with color blindness, they may see red and green as the same color (Fig. 8).

Fig. 8

 

2. Operable user interface and navigation

a. Make functionality available from a keyboard

All functionality available by mouse should also be available by keyboard; browsers should provide keyboard shortcut support.
For example, if users want to confirm the text they typed in, they can either click on the button on the website or push Enter on the keyboard (Fig. 9).

Fig. 9

 

b. Give users enough time to read and use content

Some users may need more time to read or type the text, understand instructions, operate controls or complete other tasks on the website.
It is important to provide mechanisms to adjust time limits, pause the scrolling content, postpone interruptions, re-authenticate when a session expires without losing data.
The example I use here is the slideshow on the websites. Usually, the slideshow is rolling automatically. Some users may have difficulty to finish reading the text on the slide before it changes. When hovering the image, the rolling will stop, then the users can have enough time to finish reading (Fig. 10).

Fig. 10

c. Do not use content that causes seizures

Content that flashes at certain rates or patterns can cause photosensitive reactions, including seizures. The flashing content is better avoided or only used in a way that does not cause known risks.

d. Help users navigate and find content

The clear titles and organization should be provided; there should be multiple ways to find relevant pages; users should be informed about the current location on the website; users should be able to bypass repeated content.
The breadcrumbs navigation is a good example. Users can know where they are and go to the previous pages at will (Fig. 11).

Fig. 11

3. Understandable information and user interface

a. Make text readable and understandable

There should be a primary language of a web page and consistent language of a paragraph; the unusual words should be defined; the use of language should be as simple and clear as possible.
For example, on Wikipedia, the unusual term always has a link to another page to explain the term. And Wikipedia always tries to use the simplest language to interpret things (Fig. 12).

Fig. 12

b. Make content appear and operate in predictable ways

The navigation mechanism should in the same place on multiple pages; UI components that are repeated should have same labels; there should not be significant changes on a web page without the user’s content.
On Google, the category bar is always under the search bar and above the search results. The search results are always displayed in the same layout (Fig. 13).
This is similar to the Neilson’s heuristic 2: match between system and real world and heuristic 4: consistency and standards.

Fig. 13

c. Help users avoid and correct mistakes

The descriptive instructions, error messages and suggestions for correction should be provided; context-sensitive help should be provided for more complex functionality and interaction; users should be free to correct, review or reverse the submissions.
For example, When deleting emails on Gmail, there will be a message with an undo button. When you enter the information that does not match the requirement on a registration form, the error message will appear.
This is similar to Neilson’s heuristic 3: user control and freedom, heuristic 5: error prevention and heuristic 9: help users recognize, diagnose and recover from errors (Fig. 14).

Fig. 14

4. Robust content and reliable interpretation

a. Make content compatible with current and future tools

Robust content should be compatible with different browsers, assistive technologies, and other user agents.
For example, the websites should be viewed on Chrome and Firefox. The text should be read by different assistive readers (Fig. 15).

Fig. 15

 

By researching WCAG, I learned the importance and principles of accessibility. The U.S is doing a great job on accessibility, but it is not enough. However, in some regions, the accessibility is a serious problem either in the physical world or online. In conclusion, we should make more effort on the promotion of WCAG and other accessibility policies.

References:

Web Content Accessibility Guidelines (WCAG) 2.1: https://www.w3.org/TR/WCAG21/

Accessibility Principles – How People with Disabilities Use the Web: https://www.w3.org/WAI/intro/people-use-web/principles

Section 508: https://www.section508.gov/

 

Design Critique: Steam (Mobile App)

Steam is the largest PC gaming platform with over 125 million active users. It has a mobile app that enables players to chat with friends, view profiles, discuss in communities, verify accounts, and shop games, software or other digital products on their phones. The app is functional, but the user experience needs to be improved.

In my personal experience using the app, I found this mobile version Steam has almost all the functions of the desktop version, which is laudable. But the usability is relatively poor. With Don Norman’s The Design of Everyday things, I will apply the concepts in the book to critique the app.

1. Market

In the Market, users could sell or buy items which could be used in games online. Every time you try to sell an item in the market, whether using the PC or the phone, you have to confirm the trade in the mobile app (that might be the main reason for people to download the app). In this case, many users choose to sell items on the phone directly. In the app, the Market is a subtitle under Community that is a little hard to find. The discoverability here is not satisfying.

1) When the tabs are all closed, people will misunderstand where they are going. Regularly, we might suppose the market should be under “Shop” tab using our knowledge in mind. I recommend moving the Market to a higher level since it has a higher using frequency.


2) When choosing the item to be sold, there is a drop-down list of different item categories on the top. But another list below that is used to sort items of one category draws more visual attention. So the user would be confused (I was at the first time) about how to switch to another category. I suggest keeping the visual consistency to make the list more discoverable. The recommendation is in the picture below.


3) When finishing choosing the item, there is a prompt telling you that you should confirm the trade in the mobile app. The good constraint keeps the transaction safe. But even if you are using the mobile app, you still have to manually switch to another page to process. Also, there is no feedback on the confirmation tab. I suggest adding a small reminder as feedback on the confirmation tab, and also change the buttons on the prompt to offer users a good affordance.

2. Store

The Store page has a good mapping. The arrows show the directions that you can scroll. You can scroll down to view all the categories, and you can also scroll left and right to see the items of each category. When you access this page, the menu is hidden on the top. It shows when you slide down. The visibility here is poor. The menu has too much text with no good signifier shown. In comparison, the iPhone Appstore has a better conceptual model. My recommendation is to arrange the options of navigation horizontally fix the navigation bar position on top of the page, and add icons for subcategories.

3. Friends

In the menu, there is a “Friend” and a “You & Friends.” And there is another “Friend” under “You & Friend” which has almost the same function. The only difference is you cannot chat in the second “Friend.” The better constraint is needed to reduce the unnecessary options for users. I suggest getting rid of the “Friend” on the main menu and move its interface to “You & Friend.”

4. Error Report

When using the app, I experienced multiple types of errors. Almost all of them are because of the connection problems. These error reports have different designs shown below. The one in the middle is not an error, but it shows as an error and gives me a “Go Back” button which does not go to the page I view before. In this case, the error report itself is an error. Considering the discoverability, I would recommend the one on the right with a “try again” button which gives users a straightforward direction of what to do next.

Hope Steam could improve its UX soon!

Thank you!