Tag Archives: UXD

Progress indicators should also indicate that change is occurring

If an application is showing a progress bar of some kind it means it is doing something. If that something is doing some work not just waiting for a network response, the app should indicator the current work it is doing.

Instead some apps use an “idiot light” approach. Case in point. My PC crashed. Startup Repair is running. All it shows is a progress indicator, not one based on completion status or time left, just a blue rectangle cycling by. Its been running for hours. Is is still doing anything, is it hung, is there hope?

Sure, for many apps, actual work status output is redundant and not useful to the “average” user. So when should more information be shown? When the elapsed time is over some threshold. Or if a user wants more information, they can signal that to the app. Many applications use this approach. Why something so fundamental as repairing disks doesn’t do this is very puzzling.

The same dialog box is used in other parts of Windows 10, like when creating a Restore Point, so we still have the same “idiot light” User Experience Design (UxD).

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Toward predictive interfaces: ‘Google Now on tap’

In a prior post I compared “Google Now” and the concept of a Proactive User Interface. It looks like ‘Google Now on tap’ will finally be a step in the right direction.

My first impression from a quick read of some articles is that it is an expansion of the info cards concept with more correlation with current UI context. This is such a powerful, and an extremely obvious feature, that you wonder why this was not done years ago. True, Google will put more search and Big Data power behind this. But, is it really predictive and will it “learn” a users information patterns?

An information pattern example (from my prior post) is a User is viewing a web site. There is a probability that if a certain amount of time is spent or a certain page or article type is visited, that clicking a share button will be followed by predictable actions. For example, sharing a link with a colleague or loved one. The UI presented will then present a proactive plan. See “Proactive User Interface“. Generating information related to context is still requiring the user to perform wasted effort to form and act on immediate action plans. So what are those octocore chips for?

Proactive Interface v2
Diagram of idea

Updates

  • Nov 9, 2015: Google just open sourced a Machine Learning system, TensorFlow.

Links

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Design smell: Must run the app to configure the app

The prevailing method of configuring an application is to run the application and then select various configuration screens or preferences. This is fine, until it is not.

Sometimes you cannot run the application, so can’t configure it. An example would be the Eclipse IDE. It is possible to break Eclipse by loading a misbehaving plug-in or other means. If Eclipse cannot start, one can’t remove the offending plug-in or make other required changes.

This brings up the main problem with relying on in-app configuration. Without its use, one must be skilled in the underlying configuration storage used by the app. Further, this storage may be minimally documented, complex, or in multiple places. In worse cases, this storage is non-textual. For instance, referring to Eclipse example above, I have yet to find via a web search how to easily use the OSGi Equinox run-time (that Eclipse builds upon) to remove a recently installed feature or plug-in. I’m sure it is possible, and probably minor if you know Equinox. But, how many users of Eclipse IDE have even heard of Equinox or OSGi?

Issues

  • The app may be compromised or broken.
  • Configuring via configuration files or other apps requires a different skill set.
  • Attempts to repair via non-app UI can make things worse.

Solutions

  • Allow a subset of an application to be used for configuration use.
  • Allow the running of the app in “safe” modes. Example, Browser without plugins.
  • Create a separate configuration application.
  • Allow easier means to roll back to previous configuration.

The best solution is to create a secure application that can use the target application’s configuration storage systems. If the in-app configuration support can be modularized, this is optimal.


Drawing Hands” by M. C. Escher, accessed at WikiPaintings
© This artwork may be protected by copyright. It is posted on the site in accordance with fair use principles

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Google Now and predictive interfaces

In a prior post, Proactive User Interface, I was following up on prior thoughts I’ve had on digital assistants. Like with this other post: Synergistic Social Agent Network Cloud, or A Fuzzy Logic Controller Using Fuzzy Feedback.

Now I’ve just tried Google Now. (This current blog post was written a while back) Wow, I had that idea. I called “cards” Proposals. But, I think my concept is more advanced. In fact, without more advanced Artificial Intelligence advances, a true Assistant is not possible. This concept, of course, is not new. Shows up very early in Science Fiction literature.

Links

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Nested CSS Grid Hello World!

CSS based grids are a powerful approach to creating HTML web interfaces. There are now hundreds of CSS Frameworks that support Grid layouts.

I’ve used the 1KB grid system before, but have yet to really understand how to use grid systems well. Recently I was taking another look at this topic. One thing is very obvious, the documentation and examples of many of these are not very good. What if there were an example that all framework would implement that would showcase their use? In programming we usually would do a “Hello World!” program and extend that to say the same thing using the technologies in question, like JMS, for example.

So a solution would have to exercise the core feature set or solution set of a generic grid, and be easy to implement. One should not have to be a high-order expert in CSS to understand the solution. Below I created a simple ‘Hello world!’ that shows nested columns in use. Of course, it would need expansion to show more features and difficulties in using a CSS Grid. It would also need a real designer to create something that also looks good.

Example of nested columns using BluCSS. I just took the demo page as an example and changed it to do what I wanted. The BluCSS stylesheet includes media queries to help toward a “responsive” design. Note that I changed the “container” to 100% width. Why have large monitors if pages won’t use the space?

Screen capture of my example rendered in FireFox’s Responsive Design View. In this tool a 1200 x 800 viewport correctly allows rotate, however, on a real smartphone, Samsung Note, the vertical view is stacked. Hmm.

screen capture snippet

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; 
		charset=ISO-8859-1">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">	
	<title>BluCSS - Nested Grid Demo</title>
	<!-- Author: Josef Betancourt; Date: 20121221T1840	 -->
	<link rel="stylesheet" href="css/blucss.css">
	<link rel="stylesheet" href="css/myStyle.css">
	<script 
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
	</script>
	<script 
		src="js/ndhw.js">
	</script>
	<script>
		$(document).ready(function(){  	});		  
	</script>		
</head>
<body style="margin:1em;">
  <div class="container">
	<div class="blu_8">
	
		<!-- ########################## -->	
		<div class="blu_10 header">
			<h2 class="">CSS Grid Hello World!</h2>
		</div>		
		<!-- ########################## -->	
	
		<!-- ########################## -->	
		<div class="blu_1 test">a</div><div class="blu_1 test">b</div>
		<div class="blu_1 test">c</div><div class="blu_1 test">d</div>
		<div class="blu_1 test">e</div><div class="blu_1 test">f</div>
		<div class="blu_1 test">g</div><div class="blu_1 test">h</div>
		<div class="blu_1 test">i</div><div class="blu_1 test">j</div>
		<!-- ########################## -->	
	
		<!-- ########################## -->	
		<div class="blu_1 test">k</div>	
		<div class="blu_1 test">l</div>
		<div class="blu_5 test ">
			<div class="blu_10 box">5</div>
			<div class="blu_10">nested columns</div>
			<div class="blu_2 color1">2</div>
			<div class="blu_3 color1">3</div>
			<div class="blu_3 color1">3</div>
			<div class="blu_2 color1">2</div>			
		</div>	
		<div class="blu_1 test">m</div>
		<div class="blu_1 test">n</div>
		<div class="blu_1 test">o</div>
		<!-- ########################## -->
		<div class="clear">
			<div class="blu_1 test">1</div><div class="blu_1 test">2</div>
			<div class="blu_1 test">3</div><div class="blu_1 test">4</div>
			<div class="blu_1 test">5</div><div class="blu_1 test">6</div>
			<div class="blu_1 test">7</div><div class="blu_1 test">8</div>
			<div class="blu_1 test">9</div><div class="blu_1 test">10</div>
		</div>	
		
		<div class="blu_10">
			<a id="showBT" href="#" class="buttonCls" onclick="getSource()">source</a>
			<a id="hideBT" href="#" class="buttonCls" style="display:none;">hide</a>		
		</div>
		<div class="blu_10 color2">
			<pre class="box" id="theSrc" style="display:none;"></pre>		
		</div>		
	</div>
	
	<div class="blu_2 omega color2">	
		<div id="rs">rs</div>
	</div>	
			
	<!-- ########################## -->	
	<div class="blu_8 test color2">8</div>
	<!-- ########################## -->
	<div class="blu_1 test color2">1</div>	
	<div class="blu_1 test color2">1</div>
	
	<div class="blu_8">&nbsp;</div>	
	<div class="blu_2" style="font-size:.5em;">
			20121221T1840, J.Betancourt	
  	</div>	
	<!-- ########################## -->	
  	
 </div>
</html>

Summary
Created an example ‘hello world’ CSS Grid use. The example also includes the use of AJAX with JQuery to show the HTML source. Not part of the topic but was an interesting thing to get to work. I wonder if that technique can be used to show other things like log files.

Question: Since CSS Grids rely on horizontal flow, how are they a grid? Maybe they should be called CSS sliding rows that sometimes align into columns. 🙂

Related reading

  • CSSButtonGenerator
  • Responsive Design View
  • Responsive web design
  • Grids CSS, as bad as HTML markup abuse, or worse
  • BluCSS
  • The 1KB CSS Grid, http://www.1kbgrid.com/
  • The Semantic Grid System
  • My (current) take on CSS Preprocessors
  • 45+ CSS Grid Layout Generators
  • ” Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained “, http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-frameworks-and-boilerplates-explained/
  • ” Which CSS Grid Framework Should You Use for Web Design?”, http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/
  • “Grid System Generator”, gridsystemgenerator.com
  • “Designing With Grid-Based Approach”, http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
  • The Ultimate Collection of 50+ Resources for Grid Lovers, http://designshack.net/articles/layouts/the-ultimate-collection-of-50-resources-for-grid-lovers/
  • “Grids Are Good (Right?)”, M. Boulton, Khoi Vinh. http://www.subtraction.com/pics/0703/grids_are_good.pdf
  • “Rethinking CSS Grids”, http://www.markboulton.co.uk/journal/rethinking-css-grids
  • ” Rolling Your Own Grid Layouts on the Fly Without a Framework”, http://designshack.net/articles/css/rolling-your-own-grid-layouts-on-the-fly-without-a-framework/
  • “Design By Grid”, http://www.designbygrid.com/
Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

How to Measure User Interface Efficiency

My frustration level reached a peak while using a mobile phone.  So, again, I’m thinking about GUI design.  Why are the interfaces so bad and how to fix them?

First step is just figuring out how to measure the badness.  There are plenty of UI measures out there and many papers on the subject.  BTW, I’m just a developer grunt, coding eight hours a day, so this is out of my league.  Yet, the thoughts are in my head so ….

To get to a goal takes work.  In physics, W = Fd.  Work equals force times distance.  No direct correlation to user interface.  But, what if W is equal to user interface element activated times number of possible objects to act upon, i.e., W = U x O.  Work equals UI force times number of options.  This ‘force’ is not a physical force or pressure, of course.  It is a constant mathematical value.

Example, you click on a button and then you are confronted with a choice of five options.  Lets say you are reading a web page and you want to share it with someone.  This takes too much work, way too much.  Even getting to the sharing choice is monstrous; click the menu button, click share, find which method of sharing, get to contacts app, blah blah.

So, here is what we have.  Activating a user interface element is a force; each type of element is given a constant value, a button is 10, a scroll bar is 100, and so forth.   The number of options that results and is relevant toward the end goal is the ‘distance’.

Now you divide this resulting value by how much time it took you to get there and you have Power.   P = (U x O)/T. (Update 7/26/2013: Probably a better dimension is actual distance of pointer movement or manipulations).

Add these up for each step in completing the goal and you have a metric for an interface user story.

Why use the number of options for distance?  The number of options presented to the user is stress. Kind of related to Hick’s Law, “The time to make a decision is a function of the possible choices he or she has”. If computers and software were not in the 1960s (face it modern stuff is just fancy screens) they would know what the hell I want to do.

A follow up post will give the solution to this User Experience Design (UXD) or Interaction Design (IxD) problem, and the solution is actually pretty easy.

Update

Created the follow up:  Proactive Interface

Related Posts

Links

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Contextual State Transfer

My TV just connected to the internet, now it wants me to “close”. This is a good example of a user interface not tracking user context.

When I use the TV to connect to the web the final screen is:

Internet Content Connection Status
——————————————–
The internet content is ready

/———-
| Close |
———–/
——————————————–

It took me a few nanoseconds to understand and know what to do: it is just a continue box. Other people, I won’t say who, were stumped. “Close” what, the internet connection I was just trying to establish, case to the DVD cabinet? The fix in this case is to use the word ‘continue’ instead of ‘close’.

A lot of software is like this. Sometimes it is just a language or cultural thing. Most of the time it is the software not tracking the user’s contextual state. What is the users goal, and how does the user think they are currently related to that goal.

Here is another example, I just committed some files into a version control system. What my intent is now is just to exit the graphical app, I did the commit, or did I? Now I am faced with three buttons, ‘commit’, ‘undo’, ‘cancel’. What if I hit commit again? What does ‘cancel’ do? Isn’t that just like undo? It turns out that I really did commit, and ‘cancel’ is the exit button.

There are multiple flows in an application. The internal software control and data flows, and the external flows. The most important flow is the user flow, what the user embodies in their experience, culture, dexterity, and intelligence. Perhaps what is needed is a CxST (Contextual State Transfer) approach.

The user is using a contextual prediction engine, the human brain. Great systems track the contextual state of the user.

Related

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.