February 12, 2019

UX Prototyping Tools: InVision

The fourth post in the series where I share my unsolicited opinions about prototyping tools. As an aspiring UX designer, I'm going through the UX Design course with CareerFoundry, with the added mission to "check out" as many prototyping tools as reasonably possible. 

As a reminder, my criteria (or context) for tool evaluation are:

  • quick to learn or at least to start using
  • sufficiently long trial period
  • easy to use across 3+ devices
  • Windows-compatible
  • preview your work on a mobile device
  • convenient (or at least usable) for user testing, including remote test

Today I'll be briefly writing about InVision and concluding with some final words, from the perspective of instructional design. This may sound like a surprising twist in the story, but there's a lot of interest in UX within ID and partially it is directed at the tools of the trade. As someone who has been practically involved in the both sides, I wanted to reflect a bit on whether or not a jump into prototyping tools would be a good idea for an e-learning developer (or a general instructional designer).

InVision

Free plan: no
Trial period: 14 days (9 months for CF students)
Runs on: browser

Adding hotspots to a mid-fidelity mockup

Simply put, you'd use InVision if you're creating your screens in some sort of graphic design software (it's particularly oriented at Photoshop and Sketch users). You upload screens to InVision and create clickable hotspots to trigger actions. Thus you create an interactive prototype to send for a review or a test.

What I liked:

  • Browser-based and doesn't require installation. 
  • Previews work well on both mobile and desktop. Prototypes can be previewed either in Invision app or simply in a browser on your mobile device. 
  • Sort of easy to learn, but rather hard to discover. The UI is one of those "lightweight" "contextual" and "intutitve" things, which I personally find rather infuriating. It's not an app that I need to use in case of emergency, it's a professional tool, so I want to see all the options clearly labelled and readily available. Definitely not hidden until I accidentally mouse over something.
  • While InVision generally works and, once you get past the infuriation of sudden discoveries, it's actually quite convenient to work with, especially if you need to make changes to your screens. You can simply drag-and-drop your new image version, without losing hotspots or comments.
  • It is a robust review tool. With version management and a bit of a Kanban board for sorting screens into "Review needed", "Done" and "Needs work". Not super useful for a solo-student, but I can definitely see the benefit in a realistic business context.

What I didn't like:

  • As already mentioned in the previous point, InVision can be rather infuriating. For example, during my second hour into the app, I accidentally discovered that I can actually break a long list of pictures I apploaded into groups. But to find that out, you need to hover with your mouse between images to get an easy-to-miss prompt to create a section. Overall, I felt that InVision was full of such small annoyances, as its minimalistic design doesn't really communicate things well. It feels like InVision is trying to dance its features for you instead of speaking plainly. 
  • Unfortunately, it does happen to have glitches, particularly when applying hotspots. Sometimes they can't get saved, sometimes they vanish, sometimes they don't work.

In short: it is a robust tool for reviewing anything that you produce in another program. However, it doesn't feel like it's worth the price (especially considering that XD and Figma can do similar things and are available for free).

Final Words (From the ID Perspective)

When it comes to making interactive prototypes, if you're coming from Storyline / e-learning development background, you'd probably be amazed by the lack of functionality the UX tools offer. I constantly felt that I should build my prototype in Storyline, because you can do so many things quicker (or at all) in it: triggers, conditions and branching are the first ones to come to mind. In prototyping tools, you have to create a screen for everything, which after Storyline feels like a waste of time.

So, if you're looking to somehow combine UX and ID, then, firstly, consider that a UX Designer's job is different and occurs in a different context. Thus, adopting prototyping tools would not really be the best move, in my opinion. Personally, I've been prototyping e-learning on paper, in Power Point and in Storyline (for different levels of fidelity) for ages, and even now, after being exposed to variety of prototyping tools, I'm not convinced that I would adopt any of them as an Instructional Designer (or Learning Experience Designer or whatever you want to call that).

So, if you're looking for something to prototype your e-learning in, I would very much recommend defining the problem you're trying to solve and be very SMART about it. Don't adopt tools because you can or because it's a cool "UXy" thing to do and we should "design learning experiences". It is not the tools we use that define that. Some of the tools cost not only money, but also time to master them, so consider whether this investment would really add something for you (other than learning a new tool).

Interested to read about other tools I've tried out? Then check out the following posts:

February 5, 2019

UX Prototyping Tools: Figma

This is the third post in the series where I share my impressions from the UX Prototyping tools. As an aspiring UX designer, I'm going through the UX Design course with CareerFoundry, with the added mission to "check out" as many prototyping tools as reasonably possible. 

As a reminder, my criteria (or context) for tool evaluation are:

  • quick to learn or at least to start using
  • sufficiently long trial period
  • easy to use across 3+ devices
  • Windows-compatible
  • preview your work on a mobile device
  • convenient (or at least usable) for user testing, including remote test

Today I'll be briefly writing about Figma. Spoiler alert: so far this is my most favourite tool, so the content of this post will be extremely biased. 

Figma

Free plan: yes
Runs on: any major browser, has a desktop app
https://figma.com

A higher-fidelity mockups for the same course project.

What I liked:

  • Extremely easy to preview your work on a mobile device with Figma Mirror. Just open a browser on your phone and see your work real time. You can even make changes while someone else is commenting on the screens.
  • Very smart (although a bit hard to learn) system of reusable objects. Like with Adobe XD, you can create your source objects then place their instances within your mockups. The changes to the source object will carry over to all isntances (preserving any overrides). However, unlike with Adobe XD, where you cannot swap one object for another, in Figma you can. Don't want a button to be primary - no problem, switch the object instance into secondary. 
  • Clear interface, no functionality is hidden until "the right moment" happens. 
  • You can apply multiple layout grids, for example, both pixels and columns. 
  • Active community and an engaged development team. 
  • Projects get automatically autosaved (although you can save specific versions manually).

What I didn't like:

  • In the recent update for the desktop app, the dev team removed the standard Object, View, File menu and replace them with a hamburger menu. It's not as bad as the XD (since the hamburger actually has all the options in it), but it is still a strange an weird move that I do not find valuable.
  • Prototypes tended to lag for my when viewing them on a mobile device. Unfortunately, I couldn't use Figma's prototype for usability testing due to this.
  • Small things, like no easy way to create padding, limited options for "adaptive" or scalable design
  • It does have a bit of a learning curve, particularly if you want to master it and work comfortably with reusable objects. Some things are not obvious at all and you actually do need to watch some tutorial to wrap your head around this. I did get a bit frustrated with it at a certain point, but then the penny dropped and I was converted.

While this wasn't important for me, it has to be noted that Figma does not have the most secure project sharing. Technically, anyone with whom you share a "view only" link can comment on your design and also copy it to their own instance of Figma. While this makes benign file sharing very easy, I can definitely see how practically anyone who is working with intellectual property would want to have more control over what the viewers can do with your file. 

In short: if strict confidentiality is not an issue for you and you're ready to invest a couple of hours to watch some tutorials, then Figma may be a perfect match for you. 


Interested to read about other tools I've tried out? Then check out the following posts:



January 29, 2019

How to prepare individual assets for export in Adobe XD

This post is inspired by a brief discussion in the UX Course Slack channel. As part of the design handover, you may need to export assets from your design.  While the course material extensively explains how to achieve this with Sketch or InVision studio, the rest of the tools are up to you to figure out.

To combat that, here's a very quick and straightforward explanation of how to get your assets (and not just complete artboards (aka "screens")) out of Adobe XD.

Step 1

A sample screen: Layer menu shows three assets we'll be exporting

Give the objects (aka layers) names and group them appropriately, if necessary. In the example above we have 3 things we're interested in: two buttons and a background picture.

Step 2

This way you can mark multiple objects at the same time. If you want to mark just one object, you can hover over it and then click a little "export" icon, once it appears.

Now that your objects/layers are properly named and grouped, select them in the "Layers" menu and righ-click on your selection. Find and click on "Mark for Batch Export". This tells Adobe XD that you want these things exported.

Now go through each of your artboards and repeat steps 1 and 2 until you're done. 

Step 3

With all the necessary assets thusly marked for export, press Shift + Ctrl + E for Batch export. Follow on-screen prompts to select the necessary format and size (check the Activity requirements, as these may change) and enjoy your assets.

January 28, 2019

UX Prototyping Tools: Balsamiq

As part of my UX Design course with CareerFoundry, I wanted to use the opportunity to "check out" as many prototyping tools as reasonably possible. In this post I wanted to reflect on my "checking out" experience so far and hopefully help anyone who is also planning to dip their toes into UX software.

In the previous post, I looked at the Adobe XD, so continuing alphabetically, today is all about Balsamiq.

As a reminder, my criteria (or context) for tool evaluation are:

  • quick to learn or at least to start using
  • sufficiently long trial period
  • easy to use across 3+ devices
  • Windows-compatible
  • preview your work on a mobile device
  • convenient (or at least usable) for user testing, including remote test

Balsamiq

Free plan: no :(
Trial: 30 days (longer or CF students)
Runs on: everything, including your browser

Early wireframes for my course project 

Balsamiq is a rather special product for creating early low-fidelity wireframes. Essentially, it can replace sketching and would be ideal for those who think they can't sketch. Or for those who can, but desperately miss the copy/paste function, like I do.

What I liked 

  • Extremely easy to learn. Essentially, all you need to know is how to drag and drop, and resize objects. That's pretty much it. 
  • You can download/export your stuff once your trial version runs out. 
  • Perfect for early stages of stormforming. 
  • You don't need to endlessly copy-paste "Lorem ipsum" for placeholder text, just use a squiggly lines asset - this was hands-down my most favorite feature of Balsamiq. 

What I didn't like

  • It was a bit annoying to find assets in the browser-version, as you have to either use a keyword search or scroll horizontally through one-line menu of assets. 
  • While it was extremely easy to paste together a wireframe from existing elements, once you want to make something special, Balsamique becomes a bit more limiting and thus complicated, as you have to get even more creative.

Overall, it fits the purpose and I could definitely see the benefit of using it at the very early stages. As a designer, you don't get distracted by all the possibilities that actual development tools throw at you and can focus on the idea, rather than on its surface features. Same goes for any stakeholders or reviewers. The "sketchy" style of the wireframes clearly communicates that what they see is temporary and represents a concept.

In short: consider if it you're unsure about sketching or if you need to have a convenient way to share sketches digitally. It is a very convenient tool and I would recommended it. However, if price is an issue, you can definitely go with the more common low-tech solutions.

January 26, 2019

UX Prototyping Tools: Adobe XD Impressions

As part of my UX Design course with CareerFoundry, I wanted to use the opportunity to "check out" as many prototyping tools as reasonably possible. In this post I wanted to reflect on my "checking out" experience so far and hopefully help anyone who is also planning to dip their toes into UX software.

Since I'm not a seasoned UX Designer, I cannot speak about these tools in the business context, so I won't be considering such things as collaboration, version management or handover options. My impressions will be purely from the position of someone who is interested to learn and who isn't bound by IT policies or contracts.

So, if you want to explore some UX tools too (or maybe you're a fellow CareerFoundry student) - keep reading! In this post I'm looking at Adobe XD.

My criteria

I'm doing the UX course part-time, while combining it with a full-time job, reading a lot, and painting Warhammer 40K miniatures. Not to mention the often-forgotten household management duties. So, with the limited time resources in mind, my criteria for tool evaluation were:
  • quick to learn or at least to start using
  • sufficiently long trial period
  • easy to use across 3+ devices
  • Windows-compatible
  • preview your work on a mobile device
  • convenient (or at least usable) for user testing, including remote test

Adobe XD

Free plan: yes, with Adobe CC 
Runs on: iOS and Windows 10+ 

Adobe XD and low-fidelity mockups for my first Flashcards app.


As I mentioned earlier, I needed an application that would be easy to use across 3+ devices. Since one of my devices still has Windows 7 on it, I knew that I won't be sticking with Adobe XD. However, it was free, it was all the buzz in the social media and I wanted to see what the hype was all about.

What I liked

  • Quite easy to learn. It gives you a basic onboarding, so you get the idea of what to do relatively quickly. 
  • Collections of ready-made assets and wireframes to speed up your prototyping process.
  • Possibility to create components and styles to speed up the changes.
  • A very nifty "Repeat Grid" tool, which lets you magically and effortlessly create rows or columns of repetitive elements just by resizing your selection.
  • Added benefit: Adobe XD can read Sketch files.

What I didn't like

  • Everything else. 
  • Inconsistent performance. It was constantly freezing or crashing on one of the laptops. And I mean constantly - I had to restart it every 15 minutes since it kept freezing for no apparent reasons. On another device it would sometimes bug out, like the Alt-key would no longer work, some options would no longer respond (until you restart or alt-tab out of it).
  • Bizarre UI on Windows. As in, remember all the nice "File", "Object", "Layer" menus in either Photoshop or any other program that you might be using regularly? None of this is available in XD. Essential functions like "Save" or "Open" are hidden either under the "hamburger" menu or in the right-click menus. In general, it is extremely hard to find things in XD, because a lot of time they appear only contextually. 
  • While UI is quite frustrating as it is, it is also very different from the iOS version of the program. This makes it rather challenging to follow any tutorials, because most of the time you have to pause the video and go snooping through the menus to find the command you need.
  • Complete lack of basic features such as rulers (!!) or guides (?!) or even an ability to center text. 
  • Extremely awkward "symbol" system. A "symbol" in XD is a reusable object. As you create instances of this object in your prototypes, if you make a change to the source object, the changes will be automatically inherited by all instances. Which is very cool and handy, but, there is no way 
  • Rather hard to preview your stuff on a mobile device. Or, to be more precise, it's quite a journey to figure out how and by the end of it you don't feel as justly rewarded for your efforts. Also - you need to install fonts on your mobile phone to view your prototype properly (say what?!)
In short: avoid if you can (although you probably cannot, because your company already got hooked by Adobe, so you'll be sticking with their subpar product whether you want it or not). I know that some people are very happy about it, but I'm not one of them.


December 4, 2018

Opening Sketch files in Windows. No credit card required.


Recently my LinkedIn network mentioned a very nice library of human avatars: https://www.humaaans.com/ While this is an excellent tool and I was playing with this idea myself in the past, an average instructional designer, particularly in corporate, does not usually work on a Mac. And the files that are included in the Humaaans library can be opened in Sketch (a Mac-only program) or InVision Studio (which is also currently available only for Mac, although a Windows version will be coming sometime in the future).

So, what can an average Windows-PC wielding instructional designer do? How can we lay our hands on this goodness?

The answer is simple and quite unexpected. Get yourself Figma. Figma is a free (for individuals) browser-based prototyping tool that I've used extensively for my UX Designer course and fell in love with. The learning curve can be quite steep if you learn it from scratch, I have to be honest, but it is definitely worth it. If you want to jump on the whole "I'm a learning experience designer" bandwagon and you can learn only one UX-related tool, then go for Figma.

My romance with Figma aside, in this case it has one undeniable benefit. It can open Sketch files and it can export your creations as PNGs. Make that two benefits. And here's how to reap them.

Set up

First, set everything up in 6 easy steps:

  1. Register with Figma.
  2. Download the .sketch file from Humaaans.com 
  3. Open Figma 
  4. Import the .sketch file
  5. Ignore any concerns about missing fonts.

Basic modifications

With the file open, select any of the humans, for example, in the "Basic" frame.




If you click around, you'll notice that each human consists of fours parts:

  • head
  • body
  • legs
  • shoes
Go ahead and click on any of these four parts, for example, a head. Then, take a look at the right-hand panel. You'll notice an "Instance" dropdown in it.


Click on this dropdown and you will see all the different heads that you can use on this model. Pick a head and it will automatically replace the current style. Same will work for other components, such as body, legs and shoes. Note that each shoe will have to be selected separately. 

So, playing around with the component instances, you can immediately create a slightly different scene than the one we've started with:


   
With this knowledge unlocked, you can modify any of the models/compositions already included in the file, so try it out. 

Rotating things

If so far you've been working with objects in the Basic frame you may notice that although you can rotate the complete humans, you can't move, rotate or resize heads or legs. This is because these two guys are components themselves. So their heads, legs etc. are components within components. Unfortunately, anything anything that is contained within components cannot be moved or resized in Figma. But do not despair! If you look at the frame "Separated components", you'll see that the humans in there are groups of components. 

Component on the left (note the purple frame) and a group on the right (not the blue frame).

On the image above the character in the red jacket is a group of separate components and therefore can be rotated and resized as you wish. For example, like this:

Rotating components

You may, however make more advanced changes, like moving legs and arms separately. For example, maybe we don't like this sad doctor sitting rubbing her knee, we want her to strike a flying hero pose. 

As you remember, I mentioned that anything within components cannot be resized or repositioned. So, since sleeves and hands are element of the "body/jacket" component, you can't resize them unless you break your component into separate objects. The consequence of this action is that you will lose the ability to "switch appearances" by selecting component instances (as the component will cease to exist). So, if you made up your mind about the character's clothing and are ready to move her arms and legs, select the component you want to modify, right-click and choose "detach instance":

The component will be broken into pieces it's made of.

Note: at the moment Figma doesn't do this procedure well, so once you've clicked "detach instance", you should press Shift-Ctrl-G on the keyboard to get a proper set of separate objects. With this done, feel free to move and rotate them as you wish. You can also group objects (such as arms and hands) with Ctrl+G to rotate them together.

Striking a pose

Exporting

You can export your creations as PNG, SVG or JPG. To do this, select all elements you want on your picture and group them together. Then, in the right-hand panel, find Export menu. There, click +, adjust export settings as you need and click "Export Group". 
 
Export

Et voila! You can now open Sketch files in Figma and do basic editing. Take that, Apple!



November 28, 2018

User Research Participants Wanted

As part of my UX Designer course I’m working on a website that helps people to get an expert’s advice on tax or finance, book their services or have a video call with an expert. To evaluate and improve the website’s usability, I’m looking for those who would be interested in trying out its prototype.

What will you need to do?

I’ll ask you to complete short tasks (for example, to search for an accountant) using the website’s prototype. While “tasks” may sound daunting, rest assured that their purpose is to test the usability of the prototype, not your skills. In addition, I’ll ask for your personal opinion about your experience using the prototype.

Technical Requirements?

We'll chat over Webex webconference, you'll visit the prototype and share your screen with me so that I can see your interactions with it. This means that you'll need to:

  • have a stable Internet connection
  • install a browser addon (or an app, if using a tablet/mobile) to join the conference. 
  • have a microphone so we can chat
  • ideally, have a webcam (this is optional, but very helpful)
  • share your screen


Note on screen sharing: if you're joining from a computer, you will be able to choose the screen or program that you're sharing. However, if joining from a tablet/mobile, your complete screen will be shared. If you're concerned about privacy, I would recommend joining from a computer.

Please note that the session, with your permission, will be recorded for study purposes. The recording will not be shared and any findings will be reported in the summarized form only. The findings will not contain information that would help others identify you (e.g. your name or voice).

When and where?

Date range: 5th to 8th of December 2018
Time zone: GMT +1 (see here for exact time slots)
Location: remote via Lookback or Webex

How long?

Approximately 20-25 minutes.

Interested?

Then first, let me know which time would work best for you: https://calendly.com/perfiljeva/uxcourse/12-05-2018 (all times will be displayed in your time zone, so you don't have to do any calculations).

I will then follow up with you via email and send you the detailed information about the session, an informed consent form, as well as the instructions on joining the webconference.

Feel free to reach out to me via email or Skype ([email protected]) if you have any questions or concerns.