2014-01-01

MacroMark asked in a response to a message I posted about HS3, "how would you improve it". Even though it's hard to be helpful without knowing more context around the design/choices made by the develpers, I've been keeping some notes as I've been trying to replace my successful HS2 implementation with HS3 (still not there)...

My apologies in advance for being direct/blunt. I'm a long time user of HS and appreciate its functionality. I've always been able to get it to do what I wanted (mostly through scripting). But, the UI has never been good. I upgraded to HS3 because I assumed the UI had improved, it would have fewer bugs and that I wouldn't "lose" anything by going to it. Unfortunately, none of these assumptions turned out to be true. The UI is poor, it is buggy and I couldn't port any of my scripts.

Having said that, I really want HS3 to be a big success and hope you'll take these inputs as constructive... even if they sound negative ;-) ... as Disraeli said, "it's far easier to be critical than correct"

First, one big kudo for the auto-backup that seems to happen. I restarted my system the other day and the database got corrupted. I was afraid I'd lost a lot of work. I searched around and found several backups. I was able to move the most recent into the directory where the current one was and select it in the UI, so I didn't lose anything. Thank You! But, it would be even better if there was a choice presented to revert to the last saved db in the case of an error.

Design Center

-------------

The UI needs to be appropriate for touch devices, phones, tablets and PCs. It should automatically scale and select different widgets based on the device the user is on.

Browser independence. HS2 was very poor in this area, HS3 is better (works in Chrome at least), but there are now more environments it has to work in... I've tried it on Android phones and tablets and there are issues with your header positioning on the page (it doesn't stay fixed at the top) as well as lots of other things.

From an implementation perspective, I would highly encourage you to use several frameworks. I see you're using jquery, so, based on that...

- jquery-ui, jquery-mobile or some other modern UI framework that works on tablets, phones and PCs. Any of these will provide a much better UX out of the box than you have right now.

(Please use the framework's widgets. No offense, but yours are terrible).

- angular.js (or ember or meteor or...). These MVC frameworks give you backend synchronization and automatic updating of objects. Either will make it much easier to have a quality front-end. (If you pick angular, check out ionicframework for widgets).

UI Performance

--------------

Page loading is poor (much slower than HS2) and updating isn't very intelligent. For example, the header dropdowns on the home page are open and visible while the page loads. The page should download what it needs to and then paint the screen rather than draw some garbage and wait for the backend to give it what it needs to layout the screen properly. I haven't tried to figure out where the issues are that are affecting this.

Popups

------

You need to cut down on the popups... It makes no sense to have a popup for a text input field and have someone confirm their submission. You can just use onfocus, onblur, onchange, etc. If necessary, you can always have a "submit" button for a complex dialog. The way things work now is just an awful UX.

Many of the popups don't work properly with tablets and phones. The keyboards cover them up, they popup off the screen completely, etc.

The popups don't support basic UI "standards" - for instance, the time delay popup in events doesn't accept a "return" as "enter and close dialog" -- it actually erases the number you enter! VERY FRUSTRATING if you want to use the keyboard and move quickly.

I've also found issues with their z-index settings at times. I can't tell you all the steps to reproduce, but for instance, the script selection widget (which is completely screwed up anyway) will sometimes display under the buttons and select boxes on the event groups page. (While I'm on it, the select script popup should have a simple way to create a new script since we are often remote. HS2 had this. And, there are times that I can get HS3 to create a new script, but I can't for the life of me get it to work consistently. How about just let me put in a new script file name anytime!)

Event Groups Page

-----------------

When you open multiple things on the event groups page, there are no useful visual indicators of groupings. The styling that is is there is the same for everything and it's too subtle to show up on most screens (the small amount of indentation does very little on most larger screens and it makes the scheme inappropriate for small screens). Different blocks should be outlined/shaded/colored to show the separation.

There are a few good ways to do this and many more bad ways. Unfortunately what's there now isn't very good.

ON this screen in particular, you probably also need an option to have other groups close automatically when one is opened. This can be a simple toggle at the top of the screen.

BUG: (IMHO) When you say to do a device action for an event, once you set the device and the command, the event action is collapsed (in the UI).

It would be nice if you could order things in the accordion (e.g., the events screen) by dragging them or at least offer to sort them by name or trigger or something.

Updating is better than it was in HS2, but if an accordion section on the events screen is open when you move an event from a different group to the open group, it's not updated. You have to collapse the group and expand it again to update.

It would also be nice to have the ability to view all the events without the groupings. This is especially useful if you have lots of events and can't remember which group a particular event is in (happens to me all the time). A simple table with group, event name and perhaps a summary column would be good. Extra credit if you make it so that:

- when you click on the event, you can edit it in place using the same controls as you would in the grouped view.

- you can change the group that an event is in by clicking the group name and selecting a different one.

- edit the event name in place by clicking on it.

(PLEASE don't use popups for any of those suggestions.)

Preferences

-----------

Give users the chance to set more preferences:

- Confirm delete (event, device, etc.) should be optional (see undo below)

- Text plus icons, icons only, text-only options for buttons where appropriate

- Make it easy to hide/show different columns on the home screen via preferences and also on the homescreen itself to temporarily override the preference setting. (It should also be possible to rearrange the order of columns in any table display, preferrably by drag-and-drop.)

There are lots more suggestions to be made here, but I just don't have the time right now.

Undo vs. Confirm

----------------

An undo button is much more user friendly than forcing confirmations on everything. Also, add preferences for "confirm delete" and things like that.

Documentation

-------------

There is almost none of any value at all for HS3. And, it's got lots of errors!!! When I looked at the documentation for scripting, it has lots of hs.execX10 examples, but when I tried to use that function it didn't work... I had to have someone in the forums tell me the function doesn't exist. NOT GOOD.

And, since scripting has changed so much, you REALLY need to provide some examples for those of us with old scripts so we can easily do things that aren't obvious in the new system like "All Devices Off" or "All Lights On", etc.

Page-specific help

------------------

Almost every software system of this complexity offers page-specific help to help the user find what they're looking for.

The ancient help file that is provided with HS3 is woefully inadequate.

Also, include snippets, short how-to's, etc. Everyone learns from examples.

If you don't have the resources for all that, consider a wiki for documentation that users can add to. You can structure it and give people a chance to enhance it. You'll probably find users are your best resource for documentation.

Touchable/Clickable

-------------------

There are WAY too many icons, most of which don't really tell me anything and they're way to small for touch screens (which almost every windows PC will soon be).

For example, there is no reason to have these arrow icons be the only clickable area that opens a collapsible element. Make the title clickable/touchable - tap to expand and tap to collapse. The arrow should just indicate that it is clickable -- it shouldn't be a button!

Icons

-----

HS3 icons aren't very intuitive (how did you ever pick an airplane for "advanced"). You're much better off with buttons that have words in them than to have an icon that someone has to learn/remember.

Widgets

-------

Sorry, but the widgets in HS3 are horrible.

Whenever possible, a widget shouldn't require a separate click to set the value and close (like the delay widget for events does).

If a widget is popping up yet another widget, that's an indication that things could be improved. For example, if I click "after waiting" on the events page I get a widget with separate fields for days, hours, etc. If I click on one of them, another widget pops up. I'm sure this could be done with only one well-designed time-span picker widget.

Your time picker widget is a great example of what a widget should NOT be. WAY TOO MANY things for anyone to easily find what they want. It's like a bingo card gone 4 dimensional. Gives me a headache just looking at it.

Since you obviously have no graphics or UX people working on HS, my suggestion is that you stick with open-source jquery-based widgets (jquery ui, mobiscroll, etc.).

If you really feel you need to develop your own widgets (which I STRONGLY discourage), look at some other apps to see what widgets are available for dates, times, etc. And, don't always force a user to use a widget. It should always be possible to just enter a value by typing.

When on a touch device (tablet, phone, windows 8, etc), I suggest using mobiscroll (there's an open source version that should do everything you need). There are lots of good jquery.ui widgets for date/time pickers, etc that you could use when you're in "pc mode". Android has a very easy to use time picker now that you can look at if you want to get fancy.

Objects

-------

Event names should not have to be unique across all event groups.

Event Triggers

--------------

There doesn't seem to be a way to say "if the time is before this many minutes before/after sunrise/sunset" or "between this many minutes before/after sunrise/sunset and this many minutes before/after sunrise/sunset". I think the best way to add this is to offer an offet value on the triggers that relate to sunrise and sunset (as you do with the simplest case of "this many minutes before/after sunrise/sunset").

High level functions

--------------------

The interface needs to provide some higher level functionality to add value for the user. For instance, there should clearly be a way to define a group of devices and control them all with one command. So, define (lets's call it a) device group to include a bunch of devices and be able to send on/off/dim-to/dim-by to all the devices in the group with one UI statement. (I've lived with X10 for over 15 years... at least it had an all on/off by housecode.)

Update from the UI

------------------

Although it was far from perfect, you could update HS2 via the webpage. This is an important feature since many times HS3 is on a server somewhere else. (If it's in HS3, I haven't found it.)

X10

---

My only "back-end" input is about X10...

Yes it's old junk, but it is still big in Europe and there are lots of legacy implementations, so I don't know why you got rid of the hs.execX10 functions. You could just create wrappers around your new code so old scripts can be used on HS3 more easily.

Show more