UX exercise : Step 1 - Cropping an image

Instructions

First step : I wanted to give this task some more context. What is surrounding this task, why is the user cropping an image? It was mentioned that we are using a desktop application. I'll assume it might be a program like Photoshop. So, I surrounded the task with an image opened in Photoshop. 

The Application and Image before the crop...

Crop & Add Idea

Accordion opened to a different crop size ...

Cropping small images ...

Unity UI : Using CSS to style your Unity games

Unity is lacking an easy method to create and maintain global styles.

This video presents a solution, using CSS to style Unity!



Thanks for taking a look!

Tools : Unity's Editor Transform Widget

Today, a quick one. Simple suggestions for a widget that I use quite a bit.

Tap or click to view

Product Design : Apple's Next Gadget

Took a little time to think about cool new ideas for the next-generation Apple Watch. Things I would love to see! Mostly morphing ideas that exist together for a great gadget!

Tap or Click to view.

Tap or Click to view.

Photoshop - Modal Nightmares!

Photoshop has a great tool called Layer Styles. You can add effects to each layer in your project, this feature has been around for quite awhile. You can also have multiple effects per layer, each effect has values that can be adjusted. 

This is one of my most commonly used tools in Photoshop. However, I've been dealing with quite a bit of frustration using this tool.

This tool uses dialogs that are large and cover up my project. Managing this is time confusing and annoying. I'm constantly moving dialogs around to see my project. So, I'm suggesting an improvement that I would love!

First, let me explain my frustration via screen shots : 

Bottom Right : Adding layers styles is easy and intuitive.

Yikes : When I want to adjust the values for this layer style, the dialog generally covers my project. In this case, completely.

Why do I want to see my project? Because I can see my values adjust the image dynamically. This is super useful.

Wow : I now have two modal dialogs to manage. I have to move both to see my project.

Note : Larger monitor resolutions can help. Plus, multiple monitors are also very helpful. Credit is also due to Adobe for allowing Photoshop to remember the last position of the dialog.

However, I still find myself dealing with this frustration across different computers. I work with so many different orientations of images which leads to further frustration.

So, I think out-of-the-box we can make this experience cooler!

Let's take a look at some mock-ups that offer improvements :

Use the whole screen, dim what isn't able to be clicked or tapped. Focused.

Still let users move the panels around. Also, have Photoshop remember the last location, maybe per project.

Be smart about placement for the color modal dialog, would love recent colors and swatches on here!

We better ensure that this works with different Photoshop workspace layouts. The user can customize their UI, moving their toolboxes around - we need to account for that.

No matter the workspace layout,  always let the user move the dialogs around and remember that preference.

Overall, seems like a good evolution for Photoshop. One that doesn't completely reboot a legacy UI. The changes wouldn't be jarring for expert users of the product. And quite possibly embraced as improvements ;)

Overview of the suggested changes - Top : Adobe - Below : mine

A lot of these ideas are inspired by tablet-based creative apps, ones that have solved similar problems.




Thanks!

App UI - Uber's Waiting Screen

Product Ideas : Oculus with AR & VR

Today, I present an idea that melds the Oculus and HoloLens together. Allowing augmented & virtual reality experiences with one piece of hardware.

Wouldn't it be cooler to have one headset that can morph between the two experiences? The software could detect whether you are in VR or AR mode and adjust accordingly.

Could Magic Leap be working on something like this?

Tap or Click to see full image.

Ideas are just idea that need to be proven, this idea assumes there is a plastic that has the right reflective qualities. Also assuming a projector and projection radius that would allow a vibrant and wide image for each eye. Even more assumptions about patents and the physical universe ;)

Inspirations for this idea came from current treated glass sheets. These sheets allow projections to be displayed and yet still be transparent :

Current technology allowing transparent reflections.

Thanks for looking!

Product Design : TV Remote Control

Today, I took at a look at a darn good remote, offering ideas on how to make it even better.

Tap or Click to explore.

Tap or Click to explore.

Tap or Click to explore.

Tap or Click to explore.

Apple Predictions : Edge-to-Edge screen and android buttons

Saw this new concept of what the new iPhone is rumored to be  : Mac rumors Link

Agree with the edge-to-edge screen, but I see buttons along the bottom.

This concept is quite beautiful, the ability to touch the screen to unlock is the obvious evolution for this product.

I'm wagering this transparent fingerprint sensor isn't affordable yet. A company has announced the ability to perform this task with a transparent sensor, but i don't see that for the masses in the next release. In the future, absolutely! but not this year.

Apple isn't going to move away from that method to unlock your phone. It is also the method used to complete a purchase with Apple Pay.

Also, I feel that Apple is going to throw in the towel and finally adopt the superior back button from Android. 

Will have physical buttons along the bottom, and fingerprint recognition.

iOS UX : Switching between custom keyboards

A friend of mine just released a custom keyboard called Muggie. This keyboard offers a great method to share recorded GIF animations, quickly. 

While playing with Muggie and attempting to switch to another keyboard, trouble arose. Switching between custom keyboards was confusing. When you have more than two it is quite laborious to get from one keyboard to another intended one.

I wondered if there was a better method to switch between keyboards.

Note : Got a great comment about whether the swipe would result in keys being tapped. Would this solution not work when implemented on the phone?

Before posting the idea, I played around with 'swipe' based keyboards and also the Apple default one. I was able to simulate a hard/force swipe from the edge that didn't result in keys being tapped. I tested this quite a bit with satisfactory results.

However, Apple would have to detect a tap that originated from the right or left edge of the keyboard. It would then have to continue at lease 1/3 of the distance across the screen. Only then would the user get the hint of the other keyboard coming in from the side to overtake the existing one.

Safety : CalTrain Indicator

A coworker was telling me that the yellow line at CalTrain is a lot more important than we might think. If a person was to stand inside of the two yellow lines, the air pressure of a passing train might actually pull them into the train. This is an extremely dangerous situation, in-fact life threatening. 

The painted lines provide some confusion, why are there two of them? Why are they both yellow? Which yellow line is being mentioned to stand behind? What exactly does behind mean? What if you don't read English?   

This is a pretty simple concept and most people get it. However, when safety is involved it can never be clear enough. This is an interface in-between people and possible danger.

Let's consider the user for this situation. When designing computer interfaces, you assume the person is able to turn-on a computer, and they can execute your application or content. 

For a train station you must assume very little. The person consuming this interface might not even be a passenger, they might be a vagrant. How would even a small form of ambiguity affect a person with thought disorders, schizophrenia for example? Could a small child wander close to this danger? Could the person be illiterate? Could this interface be so clear that even animals could consume it? 

How could it be improved? 

Wouldn't it be cooler if there was only one yellow line? Let's make the other line red, as you would assume it is even more dangerous to stand in proximity of that.

The platform affords that you stand on it. You stand while you wait for the train. Could we use a visual cue to show where?   

Some simple improvements could make this a better interface.