Select Page
Concept: A user friendly form

Concept: A user friendly form

While fiddling around with Vue.js, the single best Javascript Framework, I wanted to use vuetify to – well just because I wanted to. Vuetify can be compared to bootstrap enhanced with the google material design. It is made specifically for Vue.js which makes it very easy to use.

I wanted to build a form. A part of a website, that usually feels clunky. Especially bigger forms overstrain users just by looking at them. To battle this, I made some tweaks:

Keep it simple

By dividing the form into multiple steps, you can guide the user through the process step by step. He doesn’t need to know that he has to fill out x more fields. The Top image shows that.

Ask important things first

I’ve seen so many contact forms where you have to fill out your contact info before writing your message. That whole time the user has his request on the tip of his tongue. Do him a favor and let him write it down.
Furthermore: Ask a single question to break the users barrier “Do I really want to fill out an entire form?” – Make it easy for him

Hide optional inputs

Your form is not on paper. If you have inputs depending on a previous asked yes/no question, show them if they’re needed.  Why should the user see a “fill out only if xy is yes”?

Correct errorhandling

Tell your user where he missed an input. You also can disable the submit button as long as the form is not filled correctly but keep in mind that he doesn’t know if the button is disabled or just a grey button. You still have to catch a click to show errors.

The cherry on my cake

Use vue. I made this to see how easy it is to build a usable form and make it interchangeable for future projects. Now I’ve got a component where I just have to attach an object of inputs to. Take a look at the object, it couldn’t be easier to use. Did I mention that I am in love with vue? I am 🙂

UX: Simpler navigation through content elements

UX: Simpler navigation through content elements

We’ve recently launched a website for a franchise that specialized on removing mold within buildings. This topic brings a wide range of users: home owners, tenants and industrial companies. These personas have individual problems like a damp cellar or leakage in a flat roof hall. To guide the different usertypes through a navigation results in a complex navigation very quickly.

General Navigation, specialized user guidance

 

To keep the navigation as simple as possible (only one level) we came up with a header element that the different users can identify with.

In that element you can choose between the three building types and from there choose where your problem is. The usually very complex menu structure is so simple that 85% of the users who click on a building type are also clicking on a link that is shown after.

The analytics data shows that the chance is twice as high of a user clicking on that header element than a navigation item. This shows that the users can identify themselves and their problems through the illustration and are moke likely to engage with the site that way.

Going a step further

The data also shows that most website users are home owners who have a problem with damp walls. The number of these users is so high, that we are going to change the header to guide them quicker and easier.

Fitting AR objects into the real world

Fitting AR objects into the real world

This post was supposed to be a bigger post (Yes I am an expert in advertising my posts), explaining how I went on and did the amazing thing of fitting my AR object into the real world without having it “pop out” too much. My thought was that when an object is rendered into the real world, we need to account real world camera problems (in reverse) like the white balance.

Finding the color temperature

The color temperature expresses what kind of light color comes from a light source. A warm light lets a scene appear in orange tones. A cold or very bright light dyes the scene in blueish colors. Calculating the correct color temperature and making a correct white balance is a very complex thing. There are some algorithms online but doing this calculation from an RGB value is not ideal. Just imagine a picture of a very blue car. Just because the pixels are blue, does not mean that the light is warm or cold. Sure, in a sunset the blue would be desaturated but it also just could be the car paint that is older on a cloudy day.

Manual testing

I did the one thing a good developer would do in this situation: Just don’t do it, try something else first. My initial thought was not “I have to be able to do an automated white balance”. I wanted to know if a white balance would help setting an object into the world at all. So I made myself a little interface so that I was able to change the lighting of my scene by clicking on a sun, cloud, candle or lightbulb icon. Just like a camera interface.

The result

You can see the result above. The left lion has a pure white light shining at it and the left one has an adjusted one to the room I was in. It does not seem to be any big different if the light of my unity scene is set to white, yellowish or blueish. The object just looks different, but not more or less fitting. What seems to be more important is the overall brightness and a shadow that lets the object stay on something.

All in all this testcase did not confirm my expectation but that is not a bad thing at all. I now know that we can play around with different lighting and just have to keep an eye on the brightness.

Below you can see an image of the objects in a darker environment. They definitely should have been darker to fit in.

Website security / hacking

Website security / hacking

Since I am building websites I wondered how a real “hacker” would hack a site. These fancy CIS TV-Show 3d animations are not the correct image, thats for sure. But other than that I just had a vague idea on how it worked. So the first thing I did was google “how to hack”. Well that wasn’t much of help.

Hacking tools

But which programm? What do I want to hack? What scanner is up to date? The answer is: There are many tools and all of them serve a special purpose. Some of them are better or easier to use than others and some are more powerful than others. Also, they come for different operating systems. I’ve got a mac, so I had a huge problem because most tools were for linux or windows. Luckily I found out about Kali Linux in which you can find some of the most useful tools ready to use. You can download Kali as a VM, which I highly recommend because you can screw around with some scripts and install stuff which you can then reset by installing an older snapshot. Also if you’re like me and just want to test things out, you don’t have to mess up your own OS.

The first hack

Now I’ve got a professional setup and am able to hack the world. But how exactly? How does an SQL injection really work and what tool do I use to find a vulnerability? So I googled for a tutorial and found a really good one about the technique and how to find these vulnerabilities manually (tutorial here). If you’re looking for a point to start, do it at their site and read through it. My first hack involved a browser and nothing else. The trick is, that in order to find a possibly vulnerable website, you don’t need a bot/scanner or whatever. Just google it!

The magic term here is “dork list”. These are lists that contain search terms for pages that have a URL parameter exposed. If you google for dork list, you will find general ones like “about.php?cartID=” or very specific ones that show a known vulnerability. I suggest you go for a general dork and find a page that shows content related to a given category, product-id or such. You’ve now got a website like this “http://testphp.vulnweb.com/listproducts.php?cat=1”. Write a ‘ after the 1 and see what happens. A SQL error? You’re such a hacker! Work through the tutorial and you’ll be able to see the secrets of that website.

My reaction here was: Oh shit that was pretty easy! But the correct reaction should have been “That already was illegal”. You’ve just hacked a website.

Professional tools

To make things easier kali linux offers a broad variety of tools for all your needs. You want to test the above method automatically and dump the whole database? sqlmap is your friend. You want to gather information about a specific server? Use nmap. If you want to check a website in general, you might give OWASP a try. Your target is a wordpress site? WPScan can show you the users, plugins, themes and vulnerabilities that come with these.

You see that there is a little something for everything you want to do.

Conclusion

Hacking can be far more easy than I thought. The word “can” is the key here. It can be as easy as in the above example, but it sure as well can be impossible. I think what I’ve learned in the past month made me a better website developer because I know a bit of how the “other side” works. I now know some tools and can test my own creations. Surely enough I found some nasty things in old projects.

You should give all that a try. Just make sure that you’ve got the OKAY of the website owner to hack him. Otherwise a simple secured server could track you back and bite you in the ass.

 

Image credits: kali.org

Why the Chrome Bluetooth API is a big thing

Why the Chrome Bluetooth API is a big thing

In 2015 Google introduced a new API for Chrome which made it possible to connect to bluetooth devices – through the browser (Link).

For a browser thats a big step. Why would you need to connect a browser to a physical thing? Well, physical web things are coming fast (There is a smart pillow that tracks your sleep!). In order to use them correctly, you always have to install a companion app. This sucks. Once these physical devices are here for the mass marked and not just a funny gadget, you will have a massive load of apps whose only purpose is to connect to a thing. Google is going to change this.

How exactly this can work is nicely explained by Scott Jenson, employee at google and one of the fathers of all this:

 

Augmented Reality with Unity and Vuforia on Android

Augmented Reality with Unity and Vuforia on Android

I always wanted to test out the AR possibilities that smartphones have nowadays. With all these fancy Virtual Reality headsets coming, I wondered if it is possible to create a similar experience while using the front camera of a phone. To archieve this, I simply cut a hole in my cardboard so that the camera could stick out.

 

Google Cardboard

360° tracked AR

Google offers an Unity Framework if you want to use the accelerometer data to track the head movement. In a first test, this worked perfectly well. I had a box floating in front of me. Even the cardboard push button worked and I was able to interact with the box. To make this whole thing go Augmented- instead of Virtual Reality, I cut the hole and put a video feed into the background of my scene. By the way, my test Phone is a Samsung Galaxy S7. Here is a list why this did not work at all:

  • the camera resolution was way too bad, so the background was fading completely
  • the accelerometer tracking is not fast and accurate enough to turn the ingame camera as fast as the camera screen was
  • the phone couldn’t keep up with the needed CPU power to display the video feed while continiously calculating the position of the box (I had like 10 fps)

To sum it up: A todays phone is not capable to generate a nice AR 360° experience. Sure, there might be tweaks here to improve the performance but not in a way that the outcome would be a satisfying experience. Is this the reason google didn’t make their Daydream View AR ready?

Augmented Reality without 360° tracking

This seemed like traveling back in time several years. First I tried that new fancy VR/AR Headset tracking stuff and now I am going back to hold your phone in your hand and look at it normally. Okay, who needs a Headset to use 360° AR? You obviously can look at it normally too, just like a youtube 360° Video. Sadly, the problem with the tracking speed of the accelerometer stays. The object was moving too slowly to keep up with the camera. Additionally, if you shake your phone slightly, the object wiggles a bit more than the camera. It just felt like its attached to a rubberband.

I had to go one step further back. Augmented reality with your phone, without 360° tracking. The key point here is, that it is possible to track objects through your phone. So unlike the floating cube, you are able to pin a gameobject directly on a surface or object. No wiggles, no rubberband. The magical tracking of images or objects can be archieved through the vuforia plugin.

With this technique I was able to create a very nice application in no time. We are creating a custom advent calendar every year and send them to our customers. One was just lying around. Take a look at what I did with it here.

If you want to see how I made this app, please come back later or hit me up. The tutorial is on its way.