We’ve all been there: You’re paying a bill. Typing in what feels like hundreds of numbers. Checking to see if the numbers are correct. Checking. Again and again.
Vipps, the Norwegian mobile payment application, fixes this problem elegantly. You either type in the mobile-number or the name to the reciever, and you get to see their profile-image. This way you never need to double check if the number is correct. Hello, microinteraction!
What is a microinteraction?
Microinteractions are moments of delightful experiences or useful feedbacks helping the user accomplishing their task. These micro-moments are what guides the users through a flow in an effective and intuitive way. They are an underutilized but powerful instrument for designers.
Another simple example is fiverr, a freelance service which shows a few of your key numbers on their logged in page. When you hover the key-numbers it shows an explanation of your account balance when you hover the figures.
A microinteraction consist of 3 (or 4) elements:
A trigger - Something that releases the interaction. That could be typing in an account-number.
Rules - Rules that describe what the interaction is and when it should happen.
Feedback - The interaction is initiated and the user get a moment of delight or a feeling that this was useful.
Loops and modes - How the interaction changes if it is used again and again.
The role of microinteractions in banking
Trust is what enables banks to exist. Microinteractions can play a small, although important, role in enabling this trust and security now that we don’t meet a person when we’re handling our money.
The best cases for microinteractions are moments where the user feel insecure. This is the moment where we as designers must step up the game and help the users. One of my favorite examples of this is a feature we implemented while I worked as a consultant in Skandia:banken (now Sbanken). When you’re paying a bill and typing in an account-number, they show when and how much you last paid the same account. This way you can easily confirm that you don’t pay the same invoice again, or that the amount is the same as previous transactions.
The details are not the details. They make the product.
Charles Eames
Guiding the user
Consider one of the most prominent microinteractions in online banking: the thousand-separator in input-fields. It’s a feature you don’t think about, but you sure do notice when it’s gone. It is an interaction that a developer has used hours to add, just to make your bank-experience a tiny bit better.
The thousand-separator has:
a trigger - typing a number more than three digits.
rules - when the number is above 999 there should be a gap between the first number and the three next (and a lot of other rules).
feedback - the interaction is initiated and it’s easier for the user to understand how much they have actually typed in.
Some microinteractions also need loops or modes to work: Say you are transferring money and type in a higher number than what’s on the account. If the input-field then subtly shakes when you are leaving it, it indicates that there are not enough money. If you don’t understand the shaking the first time, delete the number and type it in again the user should probably get a message explaining why the input is saying no. If not our delightful little interaction suddenly is becoming an annoying experience.
An example of shaking input from the Wordpress login page
Imprisoned by our design tools
Microinteractions are unfortunately an underutilized tool in designers toolkit. They are easily forgotten. We’re imprisoned by our design tools. Whether you use Figma, Sketch, Framer, Adobe XD or Illustrator (++), they all have the restriction that they are static sketches (maybe except Framer).
You can’t easily prototype what happens when it is time- or trigger-based, for example if you type in a number outside coverage. If you can’t easily prototype it it’s easily forgotten. This is where an actual prototype in code shines and why it’s a foundation for our projects to jump into code rather early.
A few helpful questions before designing a microinteraction
Do I need to add a new element? Microinteractions are often best when they seamlessly flow into your existing design.
Does the interaction feel the same the 1st and 5th time? Make the interaction adapt to the context and the user. It’s fun if it rains confetti the first time you log into the bank, but can become tiresome and ironic if it happens every time you log in.
Do I understand my users? Talk to them! Test your interface regularly! If you don’t know their motivations or how they use your bank you could be fixing problems that don’t exist.
Am I using the right tools for sketching and designing our product?
I’ve previously written about how to easily create a pdf from images, but when you need to merge multiple pdfs to one it’s another ballgame1. Usually I’ve resorted to Adobe Acrobat (Hello trial and paywall) or Preview. But preview is rather cumbersome. Luckily it seems like there is an easy terminal-based automator-script for this already included in OSX. Here is a quick guide to get you up and running.
Merge pdf pages
The script itself runs like this. So you could just copy this into your terminal and modify stuff.
"/System/Library/Automator/Combine PDF Pages.action/Contents/Resources/join.py" -o PATH/TO/YOUR/MERGED/FILE.pdf /PATH/TO/ORIGINAL/1.pdf /PATH/TO/ANOTHER/2.pdf /PATH/TO/A/WHOLE/DIR/*.pdf
I however found it easier to create an alias so that I can run a shorter command.
How to set up an alias for pdfMerge
Open your ~/.bash_profile file in a text-editor
Add a new line with the text:
alias pdfMerge='"/System/Library/Automator/Combine PDF Pages.action/Contents/Resources/join.py" -o'
Save the file.
Quit the editor. Your new alias pdfMerge will be set for the next terminal you open.
Open a new Terminal window and try it out:
Type in pdfMerge output.pdf *.pdf which means use Automator to convert all pdf-files in this folder and combine them to a pdf called output.pdf.
You now have one pdf-file with all your pdfs combined!
ProTip: Decide order
If you want the file in a specific order I recommend naming your files with numbers. F.ex: 1-onboarding.pdf, 2-signing.pdf. You can also type your files directly out like convert output.pdf onboarding.pdf signing.pdfSource
PS
Yeah. I know that the output-file is at the end on the imagemagick solution, and first on the pdfMerge-solution. A bit annoying.
You can hack around this by still using imagemagic, but it doesn’t just combine them, it changes resolution etc.↩
I have sweared to a RSS-reader for following blogs and interesting webpages for over a decade now. I love that I once a week can sit down with a cup of coffee and read all the blogs/websites I follow without switching context and webpages all the time.
RSS solves a problem for people who regularly use the web. It allows you to easily stay informed by retrieving the latest content from the sites you are interested in. You save time by not needing to visit each site individually. You ensure your privacy, by not needing to join each site’s email newsletter.
My RSS-reader history
I got introduced to RSS-readers with Google Reader, and became quickly addicted. When Google shut it down in 2013 I needed to find an alternative. My choice fell on Shaun Inmans Fever. It was a self hosted solution, which meant a bit of work, but on the other hand I owned my own data and it would still work the day support for it stopped.
I loved how it worked and that I had control over all the files – especially the CSS. I even made my own theme people could use. Sadly Shaun Inman stopped supporting fever two years ago. I’ve been using it until now, but it’s time to admit that it’s just running on fumes now. We had a good run.
Therefore one of my weekend activities became finding a new RSS-reader. On my iPad I’ve been using Reeder 3 for reading the content on Fever. I therefore started with the list of RSS-readers Reeder supports. I checked out more or less everyone of the competitors, but there was one clear winner:
Feedbin is a small company with two persons running on a subscription-based model (5$ month). Good news: a sustainable business-model unlike Google Reader and Fever.
Subscribe to emails
The one killer-feature which made the choice to switch to Feedbin easy was the ability to subscribe to newsletters and have them appear as a feed together with your other subscriptions. The last years it has, understandably, become very popular to make newsletters. There is a lot of great newsletters out there that just excist as newsletters and the only way to access them is by getting mail. I personally hate to get newsletters mixed with other mail and things I actually have to respond to. Mentally it’s better for me to read those email-subscriptions while I read the other RSS-feeds thereby seperating work from reading / getting updated. Therefore this feature in Feedbin really struck home, and I’ve been transferring each newsletter as I get mail in my inbox.
Clean up old feeds
Luckily it is usually easy to switch RSS-reader since there is an open standard for consuming and exporting them, OPML, which almost everyone use. I used that when switching from Google reader to Fever, as well as now from Fever to Feedbin. That meant there were lot of feeds that needed to be cleaned up - some feeds hadn’t been updated since 2012. Luckily Feedbin has a simple solution for seing how frequently blogs are updated and when they last were updated which made the cleaning job rather easy.
A lot of great features
Feedbin got itself a new fan this weekend. I recommend trying it out. It also has a bunch of other great features like:
Nice typography. Hello Hoefler & co!
An impressive webapp which makes me forget Reeder 3 exists. (Seriously: the only thing to complain about is if your are switching to another app and back and it forgets it’s state)
It can fetch full text from article for feeds that only offer partial content
Now and then I find myself in the situation where I need to create a pdf from some images. I often resort to Preview, but it can be quite cumbersome at times. There is however an easier and faster option, but it requires that you use the Terminal.
Images to pdf step by step
First you need Homebrew, which is basically the app store for Terminal. If you don’t have it installed open up your terminal and paste in /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" and press enter. Then follow the instructions in Terminal.
Once done close your terminal and open it up again (to make sure that Homebrew works)
Then type in brew install imagemagick. This installs imagemagic which is the program that will help us create the pdf-files.
When finished close and open up your Terminal again.
Next step is to find the folder where we have the source images we want converted. The easiest way to do that is to find the folder in Finder. Then in your Terminal type in cd and then drag your folder into your Terminal window. Now it will read cd Downloads/images or something similar. Then press enter. Now we have navigated to a new folder in Terminal!
Type in convert *.jpg output.pdf which means use imagemagick to convert all jpg-files in this folder and combine them to a pdf called output.pdf. You can adjust this if you f.ex. have png-files, or create your own name on the pdf: convert *.png myAwesomeFile.pdf.
You now have a pdf-file with all your images combined!
ProTip 1
If you want the file in a specific order I recommend naming your files with numbers. F.ex: 1-onboarding.png, 2-signing.png. You can also type your files directly out like convert onboarding.png signing.png output.pdf
ProTip 2
If the resulting pdf is too big in size you can try: convert -quality 60 *.jpg output.pdf
Svgs are awesome. They are scalable, small, and you can actually edit the file both visually and in code. This is my current workflow for optimising svgs for webpages.
Visual editing
At the moment I do most of my design work in Figma, even though its svg exports is not the best. I know they are working on it, but at the moment I export the svg from figma and import it into Sketch where I usually remove some groupings and clipping masks and export it out again.
Preparation
How you prepare the svg in your editor is an important part of optimizing your svgs, but there are two quick-fixes you can do before you export that I would recommend:
If your shape has any form of transform remove it by selecting the shape in Sketch and go to Layer > Combine > Flatten. Now the Transform should say 0.
If you have multiple shapes that visually combines to one shape Combine them by selecting them and going to Layer > Combine > Union|Subtract|Intersect|Difference F.ex. an arrow consisting of a rectangle and a triangle should be combined into one shape for smallest file-size.
Export
How you export and compress your svg are important for the final file-size. The default export from Sketch has a lot of bloat (Hello, <desc>Created with Sketch.</desc>), and we don’t want that in our final files. In Sketch I therefore have the plugin SVGO Compressor installed. It just magically compressses your files when you export as usual.
I have changed the default settings to compress the files even more than the default-setting. To copy my settings you can select Plugins › SVGO Compressor › About SVGO Compressor and then click the Edit SVGO Settings… button. Your default editor will open the svgo.json file, where you’ll be able to tweak the settings. Remove the content in the file and paste this file instead. In my experience it at least halves the file-size from the default settigs. Your milage may vary if you use a lot of masks/gradient etc. but I would recommend testing out tweaking the different parameters. They are very descriptive like cleanupAttrs, mergePaths, removeTitle etc. You can see all the parameters here
Svgomg also exist as a webtool, and even though it works like magic on the svg filesize, it doesn’t change the structure of the svg. If you have unneccesary shapes, masks or shapes that could have been combined you should fix this before exporting. This is probably whats going to save most space.
Manual editing
You’d be surprised how much of a regular svg is not needed. SVGO helps a lot with this, but just to a certain point. Most tools add unnessecary class-names and divs or groups that you don’t need any-more. They are mostly not needed unless you are doing something more complex like controlling your svg via CSS or having gradients or masks. I always recommend opening up your svg-file in your favorite editor and just delete elements that doesn’t seem neccessary.
Attributes
When you export out an svg you usually get a lot of attributes added to the svg like <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >...</svg> but when do you actually need to use them?
xmlns
The xmlns="http://www.w3.org/2000/svg" attribute is
This says a lot of the size/placement of the elements in the svg so this is always needed.
height and width
You don’t need to specify this. If you don’t the svg will take as much space as it is allowed. Much like a regular <img /> without width specified.
grouping
Very often you don’t need the grouping (<g>) of elements if the file is simple, or you are not editing the file any more. If you f.ex. are exporting out an icon with just one shape, the grouping is unnecessary.
To get the most control of the svgs just copy the code in the svg and paste it into you html/twig/php/react-file and your good to go. I usually change the fill-color to currentColor to control the color better via the color-property in CSS. Other times I just remove the fill-color completely and target it in the css via fill. Or, if I need multiple colors, i might add classnames to each path and shape so that I can target them directly with css.
svg in CSS
There are multiple ways to add an svg to your CSS. Lets take this link with an arrow behind is an example. We can add this multiple ways:
A couple of things to note:
If you link to the svg-file it’s going to be a new http-requests, and microscopically slower.
You can directly inline svgs like this:background-image: url('data:image/svg+xml;charset=UTF-8,<svg>{content here}</svg>'); (Link 2). This however doesn’t work very well with some versions of internet explorer. The fix for this is to URI-encode your svg. I use this tool to convert the svg to data URI.
Another solution is to Base64-encode the svg, but is usually create a larger file than uri-encoding the svg directly.
You can’t use currentColor or similar when you URI-encode the svg since the browser reads it like it’s a svg that you are linking to. If you want the hover-color of the icon to be the same as the rest of the link I have 3 solutions for you:
Link to another colored URI-encoded-svg on hover (Link 4)
Use mask-image and use currentColor on the background-color. The support for this is not the best, so use with causion. (Link 5)
You could also fake a mask in SVG (basically create a box in the same color as the background, and clip out the symbol from that shape). Again we use the background-image with currentColor. The support for this is much better, but a bit hacky. ¯_(ツ)_/¯ (Link 6)
If your shape has any form of transform remove it by selecting the shape in Sketch and go to 
If you have multiple shapes that visually combines to one shape Combine them by selecting them and going to 