Evaluating Tools for Interaction Design

From paper to digital

UXTools.co has some very useful information about design tools - and they break these down into specific tasks, such as:

Just one of many intuitive rankings for useful design tool categories

Just one of many intuitive rankings for useful design tool categories

Which tool is best for information architecture? I cannot say for sure. There are many, many, many tools for designers to choose from. Knowing which tool is best for a particular task can save time and money. Let’s look at three:

This vector drawing app is part of an entire suite of tools offered by Adobe

This vector drawing app is part of an entire suite of tools offered by Adobe

Adobe Illustrator 2020

Strengths:

  • Compatibility - part of an “ecosystem” it works seamlessly with other Adobe apps

  • Established standards - works with a variety of file types, and produces files that can be used with a variety of other apps

  • Maturity - with more than three decades of development, it is not likely to go away anytime soon

  • Updates - the software is frequently updated (with both new features and bug fixes)

Weaknesses:

  • Price - Adobe products have always been expensive, and every version of Illustrator since Adobe CS6 has been priced as a subscription, billed annually or monthly

  • Interactivity - does not support interactive features. Elements are static

  • Collaboration - does not support simultaneous editing

I do not have personal experience with this app (yet) but here’s what stackshare.io has to say:

I do not have personal experience with this app (yet) but here’s what stackshare.io has to say:

Figma

Strengths:

  • Collaboration - while both Figma and Illustrator offer vector-based graphic design tools, only Figma is capable of collaboration in real-time. Multiple users can tweak and edit the same file simultaneously.

  • Endless design file versioning - file versioning is considered a “best practice” when working on a project. With Illustrator, this is done manually (users must be “good citizens” and use the “save as” option, adding _Vxx to the end of their file names. Figma does this automatically, and embeds the changes into metadata

  • Platform agnostic - Figma runs in browser. You can switch between machines to continue working on a variety of platforms. Illustrator works with a variety of platforms (Windows, MacOS, and iOS), but each system requires a separate installation

  • Responsive UI - simple changes to graphics elements update in real-time

  • Prototyping - Illustrator can produce graphics, but it cannot produce interactive prototypes.

  • Handoff - prototypes can easily be handed off to web developers to be converted into fully-functional assets.

  • Price - it is free for students

Weakness:

  • Standardization - Illustrator is generally regarded as an industry standard, and it supports “legacy” project files. Figma is much more modern, but not as backward compatible.

  • No access to API - Illustrator users can program functions directly. This is especially useful when a project requires several repetitive tasks

  • Popularity - “According to the StackShare community, Adobe Illustrator has a broader approval, being mentioned in 80 company stacks & 57developers stacks; compared to Figma, which is listed in 60 company stacks and 54 developer stacks.” - stackshare.io

Adobe’s offering for designers who need to prototype for interaction

Adobe’s offering for designers who need to prototype for interaction

Adobe Xd 2020

Strengths:

  • Compatibility - part of an “ecosystem” it works seamlessly with other Adobe apps.

  • Prototyping - intuitive interface allows designers to rapidly “wire” their screens through a variety of triggers.

  • Large library - offers a wide variety of animations, transitions, and triggers.

  • Platform specific templates - includes built-in templates for quickly establishing a project format. Users can work from a variety of pre-baked device settings (iPhones, Android, Web, Desktop).

  • Updates - the software is frequently updated (with both new features and bug fixes).

  • Web-based sharing - prototypes can be shared and launched in browser. Works with Adobe Cloud

Weaknesses:

  • Price - Adobe products have always been expensive, priced as a subscription, billed annually or monthly

  • Limited multimedia abilities - while the graphics components are fairly robust, the sound features are extremely limited

  • Collaboration - does not support simultaneous editing

Which tool is right for evaluating information architecture?

I do not know. I have decided that I will work with Figma, because I believe that their list of features are compelling and complete enough for my first IxD prototype project this semester. Additionally, Figma has gained significant industry presence. Knowing how to use this software could be beneficial to a variety of future careers.

Prototyping for IxD - Case Study

Information Architecture: Frankie Bunz

Pittsburgh, PA

One other component worth considering in the context of the customer journey and user experience (see my previous post), is the Information Architecture of the food menu. Let’s take another look at the menu:

There are a total of three menus at Frankie Bunz: one in the window, one on the ordering counter, and a handwritten banner inside the restaurant.

There are a total of three menus at Frankie Bunz: one in the window, one on the ordering counter, and a handwritten banner inside the restaurant.

The Food

There are eight standardized options:

The Frankie Bunz

The Don

The Hyman Roth

The Fredo’s Frank

The Sonny Special

The Henry Hill

The Mr. Miyagi Doggie

The Grateful Dog

The Chairman of the Dog

Customers choosing a standard dog still have the option to add additional toppings (more about this later), and must choose from one of four bun types*:

White

Wheat

Pretzel

Onion

*The only exception is the “Mr. Miyagi Doggie” which is an Asian Fusion spin on the classic corndog - featuring a tempura batter and side of slaw with special “dragon sauce.”

There is also an option to “B.Y.O.D” (Build Your Own Dog) with six dog options:

Smith’s Natural Skin Casing Hot Dog

Jubilee Farms All Beef Hot Dog

Hebrew National

Spicy Beef Dog

Turkey Dog

Veggie Dog

Toppings

There are two categories of toppings*:

“Frankie’s Fresh”

Premium

*The premium incurs a $1 charge per selection.

There are eleven “Frankie’s Fresh” toppings:

Ketchup

Mustard (Yellow, Dark, and Honey)

Siracha Mayo

Fresh Sauerkraut

Pickles

Onions (sweet vidalia)

Hot Peppers

Relish (sweet and dill)

And there are seven Premium toppings:

Chili Sauce

Bacon (candied)

Avocado

American cheese

Shredded, aged cheddar

Swiss

Pepper Jack

Sandwiches

If hot dogs are not your thing, they also offer large sides as well as grilled cheese sandwiches.

Grilled cheese sandwiches offer three options for bread:

White

Wheat

Sourdough

and four options for cheese*:

American

Swiss

Aged Cheddar

Pepper Jack

*Customers may select any combination, up to and including all four on the same sandwich

Customers may add any of the fourteen (fresh and premium) toppings offered for hotdogs to their grilled cheese (see above).*

*Customers can also add any choice of the six dogs (see above) for $2

There are also five standardized grilled cheese (with choice of bread), offered as a “daily special” Monday through Friday.

Sides

The only side offered are their fries.

There are four options to select from:

Regular

With melted cheese

“Da Woiks” (i.e., chili cheese fries with bacon)

"Poutini” (i.e., cheese curds, house gravy, and scallions)

Drinks

There are six fountain drinks (one cup size) and sixteen bottled drinks available. I won’t list them here; they offer Pepsi products, and you can see the options for yourself:

Drinks.jpg

Information Architecture

As you can see, there are many, many choices for customers to make. However, the choices have a logical flow and can be reduced to discrete categories with a linear progression.

A minimum of five choices must be made to complete an order.

A minimum of five choices must be made to complete an order.