Interaction Design IxD

interaction

Interaction design defines the relationship between people and the product they use, from computers to mobile apps and beyond.  How do you incorporate it into your work to create more meaningful experiences?

One mistake some designers make is a tendency to focus on how things look, when the focus should equally be on how things work.

Interaction design, often abbreviated as IxD, is the practice of designing interactive digital products, environments, systems, and services.

IxD is often associated with digital design, but it is also useful when creating a physical product and considering how a user might interact with it.

Some crossovers of interaction design include human–computer interaction, and software development.

It’s not that interaction designers don’t consider form, but they are also concerned  with analyzing how things are, how they could be, and satisfying the majority of users.

If you have never heard of IxD, don’t feel bad. The design fields are changing very fast right now. A future post might have to look at another job that I only discovered this month: chief experience officer (CXO). A CXO is an executive responsible for the overall user experience (UX) of an organization’s products and services.

Advertisements

New Template Being Pushed for Facebook Business Pages

changes

Many of you Facebook received the same update news that I got about changes to business Pages. I have read that these changes are largely inspired by a push to support small and local businesses.

There are more than 80 million businesses that use Facebook Pages. About two-thirds of the 1.6 billion people around the world visit a local business Page or an Event Page each week.

I have also read that Page reach and engagement for brands has been on the decline. The area of weakest engagement is the News Feed.

The News Feed is the key area for personal pages, but not so for business Pages. The changes seem to be making your business presence more like a website. Some smaller businesses have been using their Facebook Page as a website in that they don’t have a traditional website at all. Recently, I built a Facebook business Page for a professional photographer who did not have a website, though he did use Zenfolio to display and sell his work.

Business owners know that customer reviews (Yelp, Amazon, TripAdvisor etc.) are important to all businesses but especially for local businesses. If you trust the validity of those reviews for restaurants and services, they can drive engagement and sales. And facebook quickly realized (and abused to a degree) the fact that most of us especially trust reviews by their friends and families.

The update makes it easier for people to recommend your business by posting text, photos and tags directly on your Page.

There are also action buttons prominently near the top of Pages for things like booking an appointment for a haircut, ordering, sending a message or writing  a recommendation.

The email I initially received said:

We want to let you know that your Page’s template will be changing. This new design will help you connect with the people who care most about your business on Facebook.

The new layout is specifically for businesses like yours and will showcase important information about your business – like hours, prices and your menu – making it easier for people to connect with Ronkowitz LLC.

You can make this change now, or we’ll automatically update your Page layout on August 24th, 2018. You can also continue to use your current template.

Other changes are also coming for businesses. It may not really affect small, local businesses but job listings (which Facebook has been testing since 2017) is supposed to be added to business pages in the next few months.

Choosing the action buttons best suited to your business would be a good first step, but you can also feature information such as hours and prices, as well as Recommendations more prominently on Pages. You can also choose to highlight new content such as events and offers.

Some of these features are not new, but are displayed differently. Facebook says that 700 million people use Facebook Events each month. You could always link to ticket sales on another site, but now you will be able to sell tickets directly through Facebook Pages and make event-specific ads to help with promotion and marketing. Obviously, those changes benefit Facebook monetarily too.

I have seen other recent changes too not mentioned in most update articles. For example, a photo post I shared from my Instagram to Facebook no longer carried an Instagram label and so looked less like a repost.

Type, Typefaces and Fonts

Everyone online knows the term “font” but or designers there are important differences between type, typeface, and font.

Type is the generic term for everything that goes into visual text. Historically, the term  referred to the actual pieces of wood or metal used to create physical letters on printed pages. When designers talk about typography, they are discussing the style and appearance of printed text. Some designers actually specialize in typography in the design and arrangement of text visually.

Typeface, or font family, is the A-Z alphabet designed so that all the letters and symbols have similar features. This is what we mean when we say For instance, Times, Arial, or Helvetica.

Font is the term used to refer to the specific style of a typeface. Arial Black is a font of the Arial typeface.

Designing websites requires considerations of all three terms. rarely will a website use one font throughout.

If you want to divide font styles into two groups, it would be serif and sans serif. The serif is the small line at the end of a stroke on a letter. Calibri is a sans (without) serif font, while Cambria is a serif font.

Some fonts that are quite readable on a printed full-size poster are inappropriate on a screen. And of course, a phone screen and a laptop screen are different pieces of real estate.

Designers generally look to find and use fonts that complement each other. One approach is to use multiple fonts belonging to one family so that you have bold, italic, light, medium, and black options to use. Different fonts from within the same family can break up the text and draw attention while still being complementary.

Adobe adds fonts to their Typekit library and there are names that you have probably never seen as options in common applications like Microsoft Office. Check out BlambotChandler Van De Water, EuropaType and MAC Rhino Fonts as examples.

MORE

theblog.adobe.com/whats-in-a-font-how-fonts-can-define-your-design/

thenextweb.com/dd/2017/03/31/science-behind-fonts-make-feel/

Web Design ‘Mistakes’

GoDaddy.com posted a list of 15 website design “mistakes.” Of course, some mistakes are not mistakes in some situations.

Here is their list of 15 (details on the full post) which are certainly all things to take into consideration with you website’s design.

Above-the-fold.
Speed.
Responsiveness.
Intuitiveness.
Navigational simplicity.
Readability.
Scannability.
Cleanliness.
Elegance.
Branding.
Contact info.
Search.
Timeliness.
Annoyances.
Error handling.

It is pretty much accepted that having the name of your business and purpose of your website immediately visible on your landing page “above the fold” without scrolling is a rule. “Above the fold” is an old media term from newspaper publishing where that space was what was displayed when a newspaper was stacked on a newstand.

The author lists as annoyances pop-up menus, autoplay and using Flash, but you’ll still find situations where these features play an important role. A pop-ups can be used to capture newsletter signups, for example. But if users are blocking all of them, have you planned for an alternative?

Adobe Flash has gone from being the hot feature for animated banners and menus to being a web design negative. Why? Besides pressure from Apple devices not using it, it is a closed, proprietary system in an increasingly web of open standards. It also is often hacked and it is a heavy draw on mobile device batteries.

Learning Experience Design

I have been teaching since 1975. I have done instructional design (ID) since 2000. The job of an ID was not one I knew much about before I started managing a department tasked with doing it at a university. I hired people trained in ID, but I learned it myself along the way.

As others have said, the job of an instructional designer seems mysterious. One suggestion has been to change the title to Learning Experience Designer. Does that better describe the job and also apply to people who work in corporate and training settings?

I have taught courses about UX (user experience) which involves a “person’s behaviors, attitudes, and emotions about using a particular product, system or service” (according to Wikipedia). Part of that study involves UI (user interface) which “includes the practical, experiential, affective, meaningful and valuable aspects” of the interaction as well as “a person’s perceptions of system aspects such as utility, ease of use and efficiency.”

UXWith more online learning and also blended online and face-to-face learning, there is more attention being given to the learner experience (LX). How students interact with learning, seems to be more than what “user experience” (UX) entails.

UX was coined in the mid ‘1990s by Don Norman. He was then VP of advanced technology at Apple, and he used it to describe the relationship between a product and a human. It was Norman’s idea that technology should evolve to put user needs first. That was actually the opposite of how things were done at Apple and most companies. But by 2005, UX was fairly mainstream.

Learning experience design” was coined by Niels Floor in 2007, who taught at Avans University of Applied Sciences in the Netherlands.

I wrote earlier here about how some people in education still find the job of an instructional designer to be “mysterious.”  But call it UX or LX or ID, customizing learning, especially online, is a quite active job categories in industry and and education. Designers are using new tools and analytics to decode learning patterns.

In higher-education job postings and descriptions, I am seeing more examples of LX design as a discipline. That is why some people have said that Learning Experience Design is a better title than Instructional Design. It indicates a shift away from “instruction” and more to “learning.”

Originally published at Serendipity35

Web Accessibilty

accessibility iconsThe Americans with Disability Act (ADA), was passed in 1990 “to [eliminate] discrimination against people with disabilities.” Tim Berners-Lee is credited with inventing the World Wide Web in 1989 and developing in 1990 both the first web server, and the first web browser, called WorldWideWeb and later renamed Nexus.

The Internet and the WWW provided both new opportunities for those with disabilities and new challenges.

Making things accessible to all in a digital environment takes extra thought and effort and, unfortunately, that is still not being done in all case. I am sensitive and aware of many of these issues but willing to admit that I don’t always run every check on webpages or add relevant alt tags to every image.

I have worked on a number of online projects that required focus groups and user testing, but those tests did not usually include people with disabilities or specifically address all the issues of accessibility testing.

using a touchscreen with a head dauber

A voter with a manual dexterity disability is making choices on a touchscreen with a head dauber

There have been design jobs I have done that required accessible checks because they were government sites or grant-funded by government agencies. The website for the Poetry Center at PCCC is an example of a site that because of its funding support

There are now free tools that will check many, but not all, of the most important accessibility issues on your website. WAVE Toolbar is an extension originally designed for the Firefox browser but now available in Chrome. It’s an interesting example because if you view it using Firefox you get the message: “The WAVE Firefox Toolbar is no longer available. It is no longer compatible with new Firefox versions and the Mozilla add-on developer environment no longer supports the functionality required for toolbar evaluation. We recommend that you install the updated WAVE Chrome extension.” Even accessibility tools aren’t always accessible.

Each of these tools requires interpretation in the same way that using a spellchecker or grammar checker or plagiarism-detecting tool require user interpretation. On the Poetry Center website, I will get “errors” that say “Heading markup should be used if this content is intended as a heading” but the noted line of code is not intended as a heading, so I can dismiss the error.

This post itself will produce dozens of errors in a check and some of them are out of my control because they are built into the WordPress theme I am using and I don’t have complete control over things like built-in anchors and semantic tags. Still, it is still worth running the checks to see if there are things I can address, such as images without tags (descriptions for visually-impaired users) or tables that will not present the information intended correctly to someone using a screen reader.

Do I always run a check on every page I produce. No. I am guilty of doing general checking when I first produce a site and then getting lazy as I add pages (especially true for blogs). Did I run a check on this post because it is about accessibility? Yes.

A more customizable and detailed tool (perhaps harder to use and interpret for some) is HTML_CodeSniffer which is a bookmarklet that works with most browsers.

Do you ever view your site in all the current browsers? Though you might dismiss Internet Explorer as old school, if 35% of your site visitors are using it, you can’t dismiss it.

Is your site mobile-friendly and more than just friendly to phone and tablet users?

Another tool is Tota11y which is described as “an accessibility visualization toolkit…a single JavaScript file that inserts a small button in the bottom corner of your document.” When you click on the button, you see where your web page has accessibility problems.

Good places to start are probably not with the tools as much as with some sites with information about accessibility in general. The W3C Web Accessibility Initiative provides both. They have a Web Evaluation Tools List and also information such as “How People with Disabilities Use the Web.

WebAIM is another source offering “Considering the User Perspective: A Summary of Design Issues,” and information on the “Principles of Accessible Design” as part of its “Introduction to Web Accessibility.

A search will also provide many simple articles, such as “25 Ways to Make Your Website Accessible,” that can get you started as a designer with making your designs more accessible.

The first step is simply being aware that there are always potential problems for some users when you present information in a digital environment. For example, will someone using a screen reader know that I put “aware” in italics in the previous sentence, and how important is my use of italics, bold and especially colors to the meaning of the information? What is left when all of that is stripped away?