Form Follows Function

February 25th, 2013

FFF
If you haven’t already heard of the Form Follows Function site, it’s definitely worth a peak at. The site showcases a bunch of interesting CSS and HTML5 experiments by Jongmin Kim, that stretch our understanding of what is possible with modern browsers. As an example, here is a CSS transform Flip Clock. The project has quite a few examples that somewhat remind me of what Joshua Davis was doing back in the early days of Flash. So if you’re tired of those bland boxes and arrows, here is how one individual has pushed HTML to its limits. Definitely inspirational.

Credits: Jongmin Kim

BLOKK Font

February 22nd, 2013

BLOKK Font
Tired of Lorem Ipsum content phrases? Here comes BLOKK font to help you out. It replaces all text with blocks to suggest generic text. Designed in Norway by Tom. Simply awesome. Available in TTF and web fonts.

BLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin.

Update: also check out the related Redacted Font project by Christian Naths.

Credits: Tom Arne Bakkemoen

Sketch Map

February 12th, 2013


What do you get when you mix mind maps and sketches together? Well, Sketch Maps, of course. Catriona of InspireUX just shared an interesting approach to organizing your sketches around a central idea. Awesome big canvas sketching! I’m a firm believer that your workspace affects the way you think. How you structure your screens will affect what you end up with. In the case of these Sketch Maps, it’s clear that the structure guides the designer to maximize the number of alternative ideas. It forces the designer to explore more alternatives in a playful way as opposed to thinking about a concrete unified solution. Two thumbs up. Thanks for sharing.

Credits: Catriona Cornett

Wireframes Magazine + Facebook

February 7th, 2013

Quick update. It’s 2013, and I finally got around to hooking up a Facebook Page for Wireframes Magazine. So for anyone who now wishes to follow the posts as an alternative to RSS and/or Twitter, you can now also use FB. :) Cheers. Enjoy.

GUI Toolkits

February 6th, 2013


GUI Toolkits is the next major UI template release by Amir Khella, who brought to you Keynotopia and Axutopia. The toolkit is apparently “the largest collection of user interface components on the planet!”. It’s loaded with UI components of various platforms (iPhone, iPad, Android, Blackberry, Windows Mobile, Mac OS X, + etc) and for various tools (Illustrator, Axure, Fireworks, Omnigraffle, Keynote, Powerpoint and Visio). Amir has packed everything into a bundle, but also allows to purchase these toolkits individually. Great job!

Fully Editable Vector Shapes

All UI components and icons are vector shapes created from scratch in each tool, and can be easily edited and customized.

From Wireframes to Hi-Fi

Create wireframes and turn them into high fidelity pixel-perfect prototypes by switching the UI component style.

100% Royalty Free

3,000+ pixel perfect UI components and 200+ icons that can be used directly and freely in your commercial apps.

Get It Now

Framer – Modern Prototyping

January 30th, 2013

Framer
Framer (github) is a modern prototyping tool. More concretely, it’s a lightweight Javacript based framework for creating and prototyping complex interactions (with animations) on various mobile devices. I haven’t tried it on a mobile device yet, but in Chrome at least (doesn’t work in the Firefox browser), the transition and animations do look pretty smooth as the author claims to rely on the GPU directly. So if performance matters to you and you’re up for some transition prototyping fun, why not give this opensource tool a try.

In Koen’s own words:

Many people already prototype in the browser. It’s simple and quick. But while html/js/css/jquery gets a lot done it has some downsides:

  • It can get pretty complicated mixing all the different technologies
  • It can be hard to get the pixel perfect control you want
  • It’s not always performant, especially on mobile
  • It’s pretty far from how it will be actually implemented if you prototype for native

Framer tries to solve some of these problems by providing a very lightweight framework modeled after larger application frameworks. The basic idea is that you only need a few simple building blocks like images, animation and events to build and test complex interactions.

Credits: Koen Bok

MicroPersonas

January 23rd, 2013

MicroPersonas
MicroPersonas is a new icon set that I just came up with for building and using quick persona like characters in your interaction design deliverables. The set is founded on the belief that personas should be generated rapidly with only those characteristics that can be used to influence or inspire design action. If personas are to be leaner, more concise and live closer with interface sketches (without being lost in separate documents) then this is a materialization of that type of thinking and a step toward lighter documentation.

The set comes with 40 sketched style characters and 9 characteristics (beliefs, habits, comments, triggers, tools, needs, problems, data, and artifacts) setup in .AI (Illustrator) and .PNG (Fireworks) formats.

Purchase and download it at www.linowski.ca/micropersonas for $29. Enjoy …

Credits: Jakub Linowski (Twitter)

jKit – jQuery based UI Toolkit

January 14th, 2013

jKit
jKit is a new toolkit for jQuery, built by Fredi Bach from Switzerland, that I think has much to offer for those with HTML prototyping needs (the way prototyping is ought to be done I believe). :) The toolkit contains quite a few widgets, interactions and behaviors that help to enhance the UI while at the same time lowering the programming barrier to entry. Some of the many things that the toolkit allows for includes: a carousel, tooltips, form validation, zooming interactions on images, list cycling for styling, auto scrolling, etc, etc, etc. Anyhow, there is a lot more to it so have a look at the awesome examples and see if you it fits your needs for the next prototype you decide to build. Thanks Fredi for releasing it under an MIT license! Rock on!

In Fredi’s own words:

jKit was born in the summer of 2012. After developing almost two dozen jQuery plugins over the past years, some for myself and some for client projects at the company I work (deep AG), it was time to create something bigger and better, especially as we needed a frontend library at our company that was easy to use for our publishers and had the features we needed. But only after implementing the first few features, I started to see the real potential for this toolkit. With only about 1k per command, the plugin could add quite a lot of useful features without getting to big in size. It would meen for us that we could add this toolkit together with jQuery onto all our new client projects and easily have all the features we needed in 95% of all cases, with the benefit, that the API was easy to use and consistent. And now we’re here, with a really feature rich UI toolkit that meets our needs and gets better almost every day, mainly because we actually use it and hopefully because of the input you can give is for perfecting it more and more. I really hope you like jKit as much as I do, because at the end of the day we can all benefit from the knowledge and experiences of each others, getting this baby somewhere not even I imagine right now.

Credits: Fredi Bach (Twitter)

Indigo Studio

January 9th, 2013


Indigo Studio, a new interaction design tool, has been released just over a month ago by the Infragistics team on both MAC and Windows. The first version is completely free and there is no catch (future versions 2 and on will be paid). It has some interesting aspects to it:

Storyboarding

The tool itself is interesting in that it has two modes of working: screen and storyboard. The screen mode allows designers to express the position and layout of typical interface elements in a traditional sense – pretty standard for a modern UI prototyping tool. Storyboarding mode however allows designers to work at a higher level of abstraction and see the bigger picture with multiple screens in view. Here the designer is given the opportunity to think bigger than just screens as the links between them come into view. Additionally, stepping beyond just screens, Indigo Studio comes preloaded with helpful sketched out real world “scenes” of people using various devices in various context. This sets the tone to think beyond just the UI.

Interactions

Once elements are laid out, Indigo Studio allows designers to express a set of interactions or events that tie screens together into a clickable prototype. Interactions can be attached to various elements or plain hotspots (helpful if you simply wish to upload JPGs or sketches from another application). Typical interactions include such things as when a user: focuses, double clicks, focuses, changes a field, or right clicks.

Screen States & Transitions

Screens in Indigo Studio have been elaborated to include multiple states that offer a helpful way to reuse elements across a more complex situation. For example, placing an element (or making changes to it) on the first state of a screen will automatically duplicate the element (or changes) across all of its states. Of course secondary states can also be modified to incorporate unique changes as a result of interactions. All screens and screen states can also be tied with handy transitions whose delays and durations can be defined as well.

Sharing and Feedback

Additionally, all prototypes in Indigo Studio can also be shared online for further comments and feedback. Sharing a prototype generates a useful link which can be sent to the team.

Indigo Studio looks pretty solid for a first release and I’m curious what future versions might bring. Ready to see if it works for you? Give it a try.

Calling Bull$#!%: The Best Interface Is No Interface

December 28th, 2012

Calling Your BS
A thoughtful article by Golden Krishna of Cooper came out a few months back which has picked up some steam recently. Its title reads “The best interface is no interface” which I think is one sided, flawed and so here are a few of my thoughts on it out in the open.

Reductionism and minimalism do not guarantee a good interaction. The author seems to advocate a 3 step process for most user tasks. On the other hand however, Zoltán Gócza writing the UX Myths blog has challenged the 3 click rule sometime in the past already, advocating for ease of navigation and a scent of information instead. Then again, I have to admit that I do value simplicity just as Golden Krishna. Lowering unnecessary cognitive workloads must be a good thing as opposed to lengthy and manual labour intensive tasks. I also do believe that a design process often unintentionally fragments the forms we design and it’s very healthy to spend energy and effort to merge or refactor shared functions so that there is less interface duplication. Nevertheless, you can still have a useless or unusable 3 step process and an awesome 7 one. More so, when you take the statement of reductionism and push it to the extreme, you result with a 0 step process and nothing to interact with at all. In that case all that you’re left with is an aware system that knows you inside out. Is that what we want? Is that good design? Perhaps in some cases yes, in others less so I think.

Non-screen based thinking does not guarantee good needs based design. The author writes “When we let go of screen-based thinking, we design purely to the needs of a person.” I’m not sure that letting go of the screen guarantees good design. There are tons of screen-less traditional tangible products which are crap. You can still have needs based user interfaces but that comes more from your values as a designer and your process. Don’t punish screens for poor design.

Interfaces are actually good because they allow us to express intent. Whether you are clicking a button on a screen or turning your keys to open a door (also an interface with two states), you are expressing a very clear intent. Interfaces (screen based or not) enable interaction. Sure, I believe adaptive systems that learn about users are great, but they are not an answer to all situations. Imagine Amazon’s adaptive algorithm being so far stretched that they actually automatically order products for you. Call it the No-Click Ordering Process. Would customers have to spend more time at the post office trying to ship and return unwanted products? Now imagine a purely adaptive nuclear launch facility without all those terrible buttons that require two users to turn the knob simultaneously before a missile is launched. Perhaps sometimes, manual expression of intent is still a good thing – at least until Ray Kurzweil figures out the singularity thing?

Interfaces are also good because they limit the amount of information that is displayed at once. Take a book as an example which is an interface to a story. With it, we can navigate through pages and chapters and focus our limited human attention at words which we combine into sentences over the course of time. If a book did not have an interface however, we would not be able to flip through pages. Instead, we’d have to comprehend the full story in an instant split second with our brains frying from cognitive information overload. A good interface respects our cognition with a proper visual hierarchy and serves us limited amount of content at a time. Let’s not get rid of it completely perhaps?

Screen based interfaces are extremely multifunctional. Actually one thing that traditional screen based interfaces do quite well is that they can shift their functions pretty quickly and flexibly as someone interacts with them. The number of functions a screen can serve is infinite. Sure that comes at the price of learning and possibly confusing some users, but that becomes the designer’s job with the potential at their disposal. A physical product such as a wine opener will be a wine opener and serve a very narrow set of functions by comparison. Yes, the advantage is surely that a wine opener allows us to store the interaction as motor memory with the benefit of physical tactile feedback. Nevertheless I think a designer should choose if the product should be screen based or tactile or both based on some of the qualities and interaction characteristics.

Don’t get me wrong. I think it’s great that Golden is challenging the amount of screens we “slap” everywhere. Those two examples of a car dashboard with a Twitter screen and a fridge with another are perfect in highlighting desperate and thoughtless products. I think it’s also great that the author is thinking about adaptive systems that alleviate unnecessary labour and guess some decisions for us. Finally, I also think it’s great that Golden is taking into account hardware sensors that open up novel ways of interacting. But please don’t shoot yourself in the foot and make sensational statements that the best UI is no user interface at all. If the best UI was truly no UI, then why not put your money where your mouth is and get rid of all links and buttons on the Cooper.com website, and well, actually why not get rid of the screen based website altogether? Sorry if this sounds harsh, but it’s just a devil’s advocate thought experiment to make a counter point. :) I suggest we stay clear of extremist design philosophies and find a more balanced approach where good interfaces live alongside adaptive systems and new interactions. In the end, interfaces are here to stay and so is my pencil.

Credits: Jakub Linowski