Tag Archives: Case Study

UX: Flat Design

I’ve grown to become quite opinionated about the recent Flat Design trend. Ironically at this time of writing my blog is using a rather flat design, however it still uses borders, dividers, and background colors which as you will see many flat designs ignore or drop.

Gripe with Flat Design

Microsoft chose grey on light grey on white with their new flat design in MS Office 2013. This is very hard on the eyes and makes finding sections / ideas in the UI take a bit of studying to understand. I won’t even go into Windows 8 start screen or new desktop UI which both have other issues. Apple in iOS7 appears to be choosing border-less white divs with section breaks just being a larger padding between items. There is little to no affordance.

If these are the leaders, I’m concerned.

Some are using Flat Design well

However, in my opinion some companies are pulling off flat design well. For instance AVG 2013, they chose very intuitive layout that makes the UI simple and understandable, I don’t use the product, but I would trust my grandma to run it. Other fine examples are the games OLO, Letterpress – check them out.

Some companies are going for a Almost Flat Design, which I can agree is a good compromise, making things a bit more intuitive and have substance. Examples include LinkedIn app, Google products, Facebook. And now with Google announcing Material Design that becomes even more clear.

What I’m saying?

It’s not about emulating the ‘real world’ as it is giving items a sense of sections, and layers. First sections, A menu bar or sidebar ought to look separate from the content. More specifically, static vs. dynamic content ought to be separate. Second layers, if a menu has a drop down that is going to cover content, there ought to be (even a subtle) hint/shadow that is is currently above the content and has a border to visually show its identity. Users will intuitively know there is content under it and not mistake it being part of the content. And not to say ‘Real world’ is what I’m suggesting, if I were then I would want SPST Push Button or NTE 54-533 Switch Rocker.

Where are we heading?

I could dig in further with some closer examples, but I feel User Experience seems unfortunately been placed on the side in many flat design cases. It seems we are in a UI counter-culture mood swing from our overdose on 3D buttons, and huge drop shadows. I get it. We just have to be careful to consider usability, intuitiveness, learnability, human errors, and other UX items. Maybe it is just poor flat design that I’m not a fan of or haven’t given it a full chance, but I’m concerned.

Thankfully with Google talking about Material Design, perhaps we can start to head in a smarter direction.

UX: Ok Google, I see a fun problem

Have you played with the Google Now Search App on iPhone or voice recognition on Android? Or maybe you’re even lucky enough to have played with Google Glass.

Say “Ok Google” and it springs to life ready to listen for instruction just like magic!

Although.. I see this could become an issue once we all have more Google Glass, Androids, or the Google Search App. One person could activate them all! In a crowded place when one says ‘Ok Google‘ all nearby device will spring to life! How fun!

Hopefully we will be able to customize the buzzphrase to activate Google voice recognition. Else this could be quite interesting one day.

Aside: For fun, I’m told on Android Google Now, you can say ‘Ok Javis’.

UX: Chromebook Profile Migration

I recently updated my Google Account password. The Chromebook had to do a migration of my profile. All went fine. However I think the UX during the migration could use a bit of touch up.

Requires old Password

I imagine this may be because the data is encrypted using the the Google Account password. My concern being, what if the user forgot their old password which is the reason for changing their password? I would have to hear some thoughts for and against this, but what if a unique key were created and stored server-side for any encryption? That might cause issues for an offline login to the Chromebook. I would have to think about this

UI feedback

The migration takes a little bit of time. During the process there is a no UI message, the Chromebook acts as if it were froze. Either a please wait message or the built in spinning loading mouse cursor would be good feedback for the user.

 

Overall the Chromebook is fantastic. I love the CR-48 and it continues to run the latest version of Chrome OS well!

Case Study: Unique Serial

I did some work repairing a gift certificate for NowStudio.co that a previous coder had created. The certificate is quite fantastic and keeps track of purchased certificates in a database. However, much of the code was written for PHP4 and had logic bugs that needed to cleaned up. A nice fun side project to work on.

The Problem.

The original coder used PHP’s rand() function to generate a number between 10,000,000 and 99,999,999 for the serial + the purchaser’s full name.

Not Unique. The obvious reasoning being that they didn’t want someone to be able to guess a certificate number and redeem a previously payed for certificate. Makes sense. However, there is a key flaw with creating serials this way. Random != Unique. There is the off chance, given time, that two certificates will be created with the same serial!

Using Names. The original coder recognized there was a chance a duplicate serial could be picked. They decided to use both the serial and the the buyer’s first and last name as the unique entries. Excellent idea and certainly seems to solve the problem. However, names tend to be unpredictable and unreliable. For instance, some last names are multi-part (Elfriede Von Kosh), have punctuation (Patrick O’Conner), or contain diacritic marks (Soňa Novak) among other things. This can cause unreliability with the app.

The question.

How can I create a better method of serializing the certificates?

Here are some requirements I came up with:

  • It has to be unique
  • Cannot be re-used
  • Non-continuous
  • Not guessable
  • Shouldn’t need to query the database to verify the serial hasn’t been used
  • Meaningful
  • Manageable in length

The Solution.

I decided simple solution is to use the full date/time + 4 random digits. For example this moment would be 2013-02-17 at 17:11:32 + 8345  or in string format  201302171711328345.

The Date. This serial has the benefit of telling us the exact moment it was generated. I use a 24-hour clock keep the length of the string always the same as well as to avoid the accidental repeated digit twice a day (9am and 9pm), that would be quite awkward. It would only increases the odds of getting a duplicated serial.

The +5 Digits. Using just the date and time down to the second I was still bugged that in theory two users could land on the page at the same moment and be served up the same serial. That’s why I felt the necessity to add the +4 random digits to the end of the string. While in theory it may be possible to still to generate duplicate serials, this makes it rather unlikely. During the save to the database we can always do a double check if we feel it is needed.

The Code.

For the landlubbers that want to use use this method of creating a serial, but don’t want to write it themselves – Here is what it looks like in PHP:

$serial=date("YmjGis").rand(1000,9999);

Too simple? Know a better solution? This only would work for small-medium sites.