Is Prototyping necessary?(UX/UI)

Tyron Barlow-Kearsley — Fri, 30 Aug 2019 11:54:42 +0000

Introduction

Beginning development on a project without a prototype is like trying to drink water using only your tongue, you can do it but it will take longer.

Think of prototyping as the conversation you have with your ideas. It solidifies exactly what is expected of you & will save a lot of time in the long run. Even if it may seem like taking a scenic route to your destination at first.

For some it may be obvious to build the plans before beginning construction, but for others (like myself) who let their excitement get the better of them & just want to start coding, the word prototype sounds like some fogey word for overcomplicating things.

Let's see some pros & cons of prototyping & why you (or your designer) should build them before delving into the matrix.

Pros

Prototypes make for a really good first deliverable on a project. It outlines requirements for the developer, let's the client/user have an early look at the product, and is a fast way to exchange helpful & relevant feedback.

It gives the user or the client a feeling of involvement early on in the development life cycle, they will have a working model to click through and test the look and feel which is often their main focus.

If any changes need to be made, they can be clarified and resolved before any amount of time has been spent on developing the feature. This reduces development costs, time, and any confusion or uncertainty that the developer may have approaching a specific problem.

Cons

The biggest problem when it comes to prototyping is explaining to the user that the prototype IS NOT the final product.

In some cases the developer/designer could spend excessive time trying to perfect a prototype, when the intention of a prototype is to be built efficiently.

I'm clutching at straws trying to think of more cons. I guess thats why its called a PROtotype.

Closing

If you're still reading this after that joke,

Here's a list of some cool tools i've checked out:

Adobe XD
Marvel App
Axure RP
InVision

My knowledge is limited to my experience, I'd like to hear your thoughts

NOT NOT (!!)

Tyron Barlow-Kearsley — Tue, 27 Aug 2019 09:47:29 +0000

Picture this

You need to check if an element exists on a page, let's take a look at this example:

You have a list of cool bugs on your website, but you want to check if the ladybug element is present on a specific instance (maybe the user initially chooses a bunch of insects from a list)

function doesLadybugExist() {
    return (document.getElementById("lady-bug"));
    // This will either return the element, or null
}

This looks alright... but, this will either return the element, or it will return null, which is not wrong, but in this example its not desired, we want to see if the ladybug exists

Lady bugs are !! cool

function doesLadybugExist() {
    return (!!document.getElementById("lady-bug"));
    // This will either true if it exists, or false
}

Take a closer look and see the !!

This is great because it returns a boolean value for us to if the user likes ladybugs or not. Success!

But not so fast. How does this work?

A quick google search will tell you that !! does not exist in a java context. It is simply the ! operator used twice.

What this does is it converts a non-boolean to an inverted boolean, meaning any truthy values get evaluated to true, and any falsy values get evaluated to false (in a boolean context)

All values are truthy unless they are defined as falsy

Below are the values that are falsy in Javascript according to MDN

No.	Value
1.	false
2.	null
3.	undefined
4.	0 (note: the string '0' evaluates to true)
5.	NaN
6.	''
7.	document.all

Using !! is a clean, and easy way of comparing the state of an element on your DOM against a boolean value without having to worry about type-casting and other conversion methods.

And, lastly, do not not leave a like and a unicorn ;)

DEV Community: Tyron Barlow-Kearsley