Tag Archives: UX

Coding

Code: jquery.otherdropdown.js

Leave a comment

Today I published my first node npm package and bower package – jquery.otherdropdown! For quite a while I’ve been reusing a simple code snippet that made it possible for a user to add their own custom response to a select dropdown. I never thought I would publish it.

The principle is simple, in a list of options when the ‘other’ response is selected, prompt the user to specify what they mean. Try out the demo.

jquery.otherdropdown

I’ve seen forms that add an additional input, but it’s effective – but feels choppy to the user. Processing the data can also be slightly more complex when you have to check for a value that may or may not exist.

A long while ago I wrote a script (before jQuery was prevelent) that manipulated the DOM to give the effect I was after. Since then it’s been modified and switched to use jQuery and made it into a plugin.

The functionality is all self contained and pretty simple to use.  Use jQuery to get the select dropdown and runn the plugin on it:

$('.myDropdown').otherdropdown();

Publishing it to Bower I realized could be helpful not only to me but to everyone. Why not give it a go? Many things needed to be done, make it flexible with options for customization, create documentation and demos, and sharpen up the code. After several hours it was ready to go!

It’s been fun to work on. More complex idea are cooking.

Opinion, User Experience

UX: Flat Design

Leave a comment

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.

User Experience

UX: iOS 8 Notification scroll state

Leave a comment

Ever open Notification Center and find that you’re partially scrolled down? As of iOS 8 the scroll state is persisted from last time it was open.

IMG_6288.PNG

This causes confusion:
-additional gestures to see recent notifications
-unclear ordering or recency when view is show
-if scrolled by chance to only have one app banner, may be surprised to find additional notifications above.

Possible fix:
The scroll state could be reset after a new notification and after a timeout (perhaps 1 minutes). Preferably the state would be reset every time it is reopened always showing the freshest state.

User Experience

UX: Ok Google, I see a fun problem

Leave a comment

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’.

User Experience

UX: How my brain analyzes objects.

Leave a comment

(In loose quick categories to be later sorted and ranked)

Ironically this list needs further organization.

Objects I thought of while building this list:
Car, Bike Lock, Door security code, Dresser, Website, Smart phone, Spatula, Database, street lamp, boxes of different screws, music, driving directions, people, posters, roller coasters, dentist chair lamp.

Categorizes / Characteristics / Typecasting

What items are behave similar or are related?
Can they be grouped, and thus the group have a predictable nature?
Should it be placed with similar objects?
Do other objects belong with it?
Is it loose or well defined?
Is it subject to lazily containing extraneous objects that do not belong to its type?
Does it have a predictable nature?
Can you amuse another one would have the same characteristics?
What are its attributes?
What are its attribute types?
Can it be sorted / organized?
Can numeric values be applied and compared?
Can it be compared, ranked, filtered, or sorted?
What is its mediums?
Are their variations?
Does it deviate from the norm of similar objects?
Do colours have a meaning?
Hoe does it move?
What is its movment range / max?

Patterns / Symmetry / Predictability

What is it like?
Are other pieces identical to others and thus simpler than it appears?
Was it crafted with care relative to other similar parts?
Is it intuitive?
Are components replaceable?
Does it known my intention?
Can it know more with asking less?
Is there time constraints or automation?
Is their a longer and shorter way?
What can’t I see/observe?
How did it get this way?
What holds it together / in place?
Does it require maintenance?

Function / Dis-function / Improvements

How does it work?
What is its purpose?
What other purposes does it have?
Can it be broke, bypassed, or misused? Why?
Could it do another task better?
What feedback do you get from misuse?
Could it be simplified?
Are all steps needed? Could steps be removed?
Is their a manual human process involved? What is their effort level or intellect level?
Can it be interrupted?
Was it tested and verified?

Inputs / Storage / Outputs

What ways does it receive instruction?
What formats can it be controlled by?
Can inputs be tampered with? Does it validate?
Does it remember?
What format or where does it remember?
Can the storage be accessed, changed, or cleared?
How do I receive feedback?
How can it be used or captured?
Does it forget?
Where else could I see or access these points from?

Keys / Permissions / Access

How does one properly gain access?
Is temporary access granted?
Who can use it?
Are there different levels of access?
How does it reject bad access? What feedback is provided?
What finite bound are set on access?
Could access be guessed? How long?
Is access accidentally revealed?
Is the access method default, obvious, or simple?
Is the access method easily spoofed?
Is the access method answer stored nearby in plain site?

Options / Alternate Uses / Choices

What preferences or settings do I have?
Can it be used in an alternate way?
Are the default options the best?

Extendablity / Compatibility / Flexibilty

Is it modular, upgradable?
Will it work with other related objects? Which ones? Why?
Can it be reused in a different context?
Can it adapt to different situations?

Adaptability / Longevity / Morph-able

Can it change over time to adapt to newer circumstances and advancements?
What is the lifespan?
How will it work x years from now?
Can it change? What does change look like?
Is anything outdated?

In summery: Obnoxious What? How? Why?

And I’m ok with that.

Think of some to add? Add a quick comment!

User Experience

UX: ‘Next’ or ‘More’ buttons

Leave a comment

I’ve been thinking about pagination buttons and specifically the verbiage for the next button.

Hitting a button labeled “Next” feels laborious, tedious like the viewers are sifting through a list to find something.

Hitting a button labeled “More” button may appease the viewer, making them feel content with what they have seen so far. This type of button may get a user curious, like peaking around the corner just to see what more is there.

I’m thinking people respond better to a “More” button.

However, this really depends on the type of pagination being used. If the buttons are a paired “back/next” buttons, using “more” is probably awkward.

Or am I totally off on this?

Tips

Tip: Windows Alt+Tab Order

Leave a comment

The revised Windows 7 and Windows 8 Alt+Tab has been bugging me for a couple years now. The Alt+Tab order is (or seems to be) ordered completely randomly. This prevents quickly ALt+Tab switching between two programs.

I finally took the time to find the the fix, Add the following DWORD key to the registry: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\AltTabSettings = 1

This enables the old Alt+Tab behavior. It does remove Aero Peak and thumbnails of each app unfortunately. It’s better to have something functional than shiny.

Note: I noticed a pattern, when you minimize a window, that window goes to the last in the order. I suppose the logic presumed is that you are wanting that application out of the way if you are minimizing it.

Source: SuperUser.com – Getting back the old alt-tab windows switching behavior in Windows 7?

User Experience

UX: Chromebook Profile Migration

Leave a comment

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!