6 Ways to Make Your User Smile

In the past few years UX gained focus targeting simplicity and clarity in the user interaction with the application (mobile and web). The long registration forms have almost disappeared, the office like toolbars are gone and so is the load of unnecessarily information on a single page. The important buttons became larger and more noticeable in order to guide the user for his next action. There is no doubt that these changes improved the user experience with the applications. The absence of this UX principles became a major factor in the user’s consideration for choosing a certain app over another.

Simplicity and clarity became common UX practices along the different apps. The user has a variety of application serving almost the same purpose and he is free to choose whatever he likes. So how could your app be special and become the users favorite choice? The answer is quiet surprising - your app must be fun!

The user should remember the interactions with your app. It should make him smile, it should make him say “wow!” and sometimes it should even make him laugh. If the interaction is special and exciting not only it will make the user to come back it will also make him kindly tell his friends about that “super cool” app that made him laugh and that they must try it too.

Do your users have fun or are they excited when working with your app? Do you have a user story in your backlog with a “should make the user smile” definition of done .Take a look at these 6 ideas:

1. Animations

2. Easter eggs

3. Predict the user actions

4. Gamification

5. Since you’ve been gone

6. Interaction as a relationship

Let’s dive in:

Animations

An animationless app is a boring app! The users expect live interaction, moving objects, flying adds and real life behavior while they are interacting with an application. Take a look at famo.us framework which allows you easily add animations to basic content pages and make them look awesome. Try to imagine how should the page/dialog/alert/form interact then it appears or disappears. Slowly fades away, moves to the right until it’s gone, falls from the top, increases font size, changes color and many more. Don’t push it – be cool.

 

Easter Eggs

Easter eggs are unexpected behaviors when the user does something in the app.. Take this logo for example:

That’s just cool! I found myself spending few minutes watching the dinosaur does “raar” when I hover the logo. It is so easy to create and it will certainly make your user smile. The best Easter eggs I know are actually on Google. Try typing “zerg rush” or “Atari Breakout”. Another possible and pretty cool Easter Egg is the error page. An error page is the worst thing that can happen during the user’s interaction. So we almost ought to make it fun.

Take a look at this site for some crazy ideas.

 

Predict the user actions

Which app will you prefer? A regular one that just allows you to do stuff on it or a smart one that seems as if it thinks and tries to understand and get to know you? The users want the second one.

Are you familiar with Waze?

When you open the GPS navigation app Waze in the morning it automatically asks if you are driving to work and in the evening whether you are coming back home. That’s just adorable, it’s like it knows me J

Think about the waze (I meant ways) that you could predict your users. If your app allows them to order something then perhaps the next time the user logs in it will automatically redirect him to the order status page and focuses on the user’s order.

Try to make the users think that your app cares about them, tries to learn them and to save them time.

 

Gamification

Everything is better when a game is involved. It’s human nature to try achieving a goal or a target. To try being the best in a group. So when the users have goals, targets and achievements to unlock they will want to do them. This way you can make them use all your app’s features while you guide them towards some achievement, stay longer online and insure that they’ll come back for more.

You can add levels, prizes and categorize your users. You can present them gifts when they level up or unlock some sort of achievement. Let’s say you want to give some user a coupon or a discount for his next purchase, so why not making then answer a trivia quiz or play a minified version on candy crash inside your app in order to win the discount (you can give it to them even if they lose)?

Linkedin ranks you profile, the more details you add about yourself the higher your rank is.

 

Since you’ve be gone

Nowadays almost everyone is doing continuous delivery. You add new features and change existing ones on a daily basis. How would the user know that his favorite app has a new feature or better yet how would he know that his favorite feature has changed?

You want to make the user feel comfortable with changes. Take a look once again at Google:

Feels familiar? Google always keeps us updated so that we will never come back to our app and not know how to use it.

 

Interaction as a relationship

You will always remember the first kiss with your love one, your first date, first vacation and more. They were special. How about making the first interactions with your app special? The first login, first purchase, first comment, the 10^th whatever. Make these simple actions meaningful and special. From time to time remind them of those special moments. Your users won’t believe it, they will adore your app and remember it for good. Take facebook’s ”on this day” for example when it reminds us the stuff we did exactly 5 years from now.

Special day in deed.

How does it help your app? It doesn’t. It just makes it special. And that’s what counts.

That’s my six ideas that I think will make your users laugh and smile. I’m sure that there are many more ways to achieve it. Feel free to comment and share your ideas.

Best,

Dennis

Creating Masked Input Directive with TDD–part2

In the previous post we started implementing the masked input directive. We’ve written tests and the implementation of the directive’s controller. Now it’s time to add the directive itself and of course we’ll start form the tests.

Testing the directive means testing it’s interaction with the UI. These are your integration tests. We’ll want to test the controller logic and the way it reflects in the UI.

First we’d like to test that the directive’s isolated scope has the provided “mask” and “skip” values (keep in mind that in a real application you would test the existence of all the DDO values):

Some key notes from this test:

1. In order to test a directive we must create a string that represents its DOM (an element which has the directive attribute i.e.).

2. $compile service parses the element’s DOM and executes the directive function with the provided scope. So the “element” variable is now the directive with all its properties and methods.

3. We can access the scope properties using the element’s “ísolateScope” method.

Now let’s define the DDO:

Then we’d like to test that the element’s value will have the provided mask value after the DOM compiles.

And now with the link function:

In order to change the UI (the element’s value property) you have to call to $setViewValue that is a special angular method that is in charge of setting the value property of the directive element (<input type=”text” value=”this one”/>). $render is called for the UI changes to take place.

Now we add the directive to an html file and actually see all the stuff that we were testing. Add an index.html file, include angular and all the client folder except the spec files!

Run it:

That’s what I’m talking about!

All that’s left is connecting our tested (TDD baby) controller functionality to every time the user presses a key.

I’ve created a keydown event using the private createKeyDownEvent method and fired it.

The implementation:

We subscribe to the keydown event, get the new char, call editMask and if successful re-render the UI.

That’s it! You have a functional masked input element which is fully tested.

As you can see, writing TDD with angular is extremely easy and straight forward. If you are not writing tests then you most definitely should! Just begin, it’s worth it.

Have fun TDDing,

Creating Masked Input Directive with TDD–Part 1

In the next two posts I’d like to show you three things:
1. What is a “masked input”.
2. How to create a masked input custom angular directive.
3. And the cherry on top – implement it applying TDD!
So what it is “masked input”?
It allows users to easily enter fixed length input where you would like them to enter the data in a certain format (dates, phone numbers, ids, credit card number and more).
Most of forms out there don’t supply the users any hints about the data’s format and make the users guess it (most of the time the input fields will be  blank textboxes). If there’s a format mismatch then the user will receive an error and will try again.
Using masks allow us to show the users the exact format and force them to enter it correctly.
Let’s implement it!
Remember that we’ll do it using TDD.
So first let’s define the desired API:

We want to create a custom attribute directive that will have three properties:
1. Mask – the mask that the user will see in the textbox. These values will be replaced by the user’s input as they type.
2. Skip – an array of chars that we want to be left along with the user’s input like ‘/’ in a date textbox – 01/06/1991
3. Ng-model – the associated model from some controller.
Great! Now after we know our goal we can start writing code.
1. Create ASP.NET Web API project
Add the following nuget packages:
- Angularjs.core
- jasmineTest – this is the jasmine.js testing framework for ASP.NET MVC
- angularjs.TypeScript.DefinitelyTyped
- jasmine.TypeScript.DefinitelyTyped
The last two packages include definition files used generally for TypeScript for the 3^rd parties intellisense. However I found that even if you don’t write TypeScript there intellisense is pretty helpful.

Now let’s add a Client directory, index.html file, app.module.js, app.controller.js and a InputMask directory (all the angular code is style accordingly the John’s Papa style guide).

2. Enter TDD
Before we implement the controller we’ll add a spec file to test the controller, we will add a basic test, let it fail and only then implement the controller and the module.
Add a form.controller.spec.js file (this is a style guide naming convention, formControllerSpec.js is also fine). Now we’ll add a basic jasmine test for testing that our controller is defined.

Nothing special here: we inject the $controller service in order to get our controller, inject it with a new scope and assert that the controller is defined.
Now let’s add all the files into the SpecRunner.cshtml file:

I’ve added angular, angular.mocks, the module and the controller.
The test fails since there’s no module or a defined controller– let’s add them.
First the module:

I’m using IIFE to prevent my functions getting into the global scope and prevent the tests get to my private methods.
And the controller:

I’m using the $inject pattern in order to make sure that my controller parameters won’t get ruined after minifying the code.
Let’s run the test:

Now let’s add another test to validate that the scope works:

Notice that even in js tests I still use the AAA pattern. It makes the tests readable, especially when they get complex.
Run and pass:

1. Adding the directive’s controller
The logic regarding the mask’s chars replacement will be inside the controller (the logic regarding the display will be inside the link function. We’ll get there later).
Add an InputMask directory and place the controller and its spec file in it:

And the first test:

I’m placing the specs files near the source files so that the specs will be immediately noticed when someone looks at the solution and so that it will be extremely easy to see that a file is lacking its tests.
Add the controller and the test will pass.
Now let’s start adding some functional tests.
Every time a user enters a letter a controller function must be called in order to edit the mask, it will check the current input length – it shouldn’t be longer than the defined mask and it should replace the mask characters while skipping the values provided in the “skip” array.
Let’s go:

And the implementation:

Replacing the mask as the user enters input:

Notice that the controller sets the ngModel with the mask value on its initialization. We’ll provide the mask value for the ngModel before calling for the editMask method from out test.
The implementation:

Now let’s add a test and its implementation for the “skip” characters functionality.
Test:

Implementation:

Pretty straight forward. Notice how the controller doesn’t do any UI logic– just the way it supposed to be.
In a real life application you should add as many test you can for your controllers in order to achieve maximum code and use cases coverage, in this post (which is already quiet long) we’ll stop here and move towards the next topic – testing the directive.

Crawling HTML with CsQuery

Recently I was asked to build a crawler for a webpage.

The crawler was supposed to get part of the main page values like the TV Show name, it’s season etc.

So how do you do it?

First you have to download the page’s html to your server:

using (var client = new WebClient())

 {

     htmlContent  =            client.DownloadString(link);

 }

Now you have the whole document as a string. In order to get the relevant values you have to identify the path to the element that has the desired value. You’ll want to find an element with an “Id” attribute so you can be sure that it is unique and set it as the root of your path. From that element you’ll have to travel the DOM until you get to the wanted element and its value.

For example: In order to get the TV show title in the above website I’ll Inspect the element from the browser:

The TV Show name is the innerText of the “a” element. The first unique element with an “Id” attribute is the <div id=”main”> (there’s another element that doesn’t have an id attribute but still seems kind of unique – <div class=”subpage_title_block”> both can be used).

After we identified the root element we need to explicitly describe the whole path:

div (id=main) => div => div => div (notice that the former element has an “a” element as a first child) > h3 => a. The last element has the TV Show title as its innerText.

The fun part

So how can we create such a path while the DOM is represented as a single string?

There are several solutions for crawling an HTML string: the most common is the HTMLAgilityPack which allows to perform lync style operation on the DOM. It’s nice but not simple enough to use.

There is another crawling solution - CsQuery (“Install-Package CsQuery” from nuget). It’s API is so neat and straight forward - just the way you would want it:

CQ dom = "<div>Hello world! <b>I am feeling bold!</b> What about <b>you?</b></div>";

In order to create a new CQ instance all you have to do is just serve the html string.

The selection is really simple too:

var boldElements = dom["b"].Select(x => x.InnerText).ToList();

Here you select all the bold text from the DOM.

So how does CsQuery help us in our example?

var tvShowTitle = dom["div#"main > div > div > div> h3 > a].InnerText;

Yes! That simple!

Enjoy.

Domain Driven Design, CQRS & Event Sourcing - The Lecture video

Here is the video of my lecture at the annual IDF conference. Enjoy.

Domain Driven Design, CQRS & Event Sourcing

On July 12th I'm going to give a talk at the annual IDF .NET conference which is the 3rd time that I'm one of it organizers.

This time I'm going to talk about three major patterns - Domain Driven Design, CQRS and Event Sourcing. 

I believe that the young software developers ought to know design patterns, best practices and the big things that are happening in the industry. All those patterns are becoming more and more popular for a reason. I think that most of the applications which are developed in the IDF could use some or all of them.

Here are the slides - http://slides.com/dennisnerush/cqrs#/

Wish me luck!

The video of the lecture can be found here.

Creating Nuget Packages using Visual Studio 2015

If you have ever created a nuget package you know how annoying it is. Using the nuget command line to pack the project and then create the .nuspec file and then build it for the desired frameworks.
Visual Studio 2015 (currently RC) lets you create nuget packages extremely easy!
First create a new Class Library project:

Notice that it is under ‘Web’ category.

Now we’ll enable the nugget package creation just as written in the comments above.

I just love their UX in this window.
Now we’ll need to fill the package details in the project.json file.

The project.json is almost the same as the .nuspec file. We can include the package dependencies and the target frameworks.
Now if we compile the project and navigate to the solution directory we’ll see the nuget package in the artifacts folder.


Good luck