UI positioning logic for business apps

[rob]

Just for technical accuracy a “Higher” aspect ratio would be a thinner/taller device.  AR > 1.5:1.  A lesser AR would be a device < 1.5:1 like an iPad.

Secondly, device’s can be more than 568.  There is a samsung device that advertises being a 16:9 device (1.77778:1) which should be 570 on this scale, but because of the button bar, when in landscape mode, the AR becomes more like 1.85:1.   When it’s portrait, it’s less than 1.77778.  Stoopid soft button bars…

So far, we’ve only been discussing portrait devices, of course for landscape apps the values flip.

and so long as “center”, “right” or “bottom” anchored calcs always use the dynamic  display.contentXXX values, then the UI will look right on all devices.

And for “left anchored” objects, (even
tho the 100, 200, 400 pattern may vary on wider devices) they will stay
proportionally distant from each other, but just not proportionally distant from the right edge…

That is correct.

For the iPad, your content area will be 900 x 1200.

For the iPhone 3/4 the content area will be 800 x 1200.

For the iPhone 5/5s the content area will be 800 x 1420.

For Android devices the content area will be 900 x ____ where ____ is TBD based on the device.

If you are going to use 320 and 480 as your values, you can always use 44 px high and it will be the same relative height on all devices.

[ksan]

@atanas

I uploaded it on my github at https://github.com/atanasster/framework-widget/tree/master/widgetLibrary .

Unfortunately I have no sample app to show the capabilities, but here is a screenshot (its the bottom panel that has the buttons and text aligned in two columns). For the time being, I am doing the text and buttons layout “manually”

That is one beautiful layout! The Pane looks great. 

[ksan]

Talking about UI layout and the science behind all this, I am reading a new book called :

“Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Guidelines”

Very nice book focusing on how we observe, process and remember etc. Great book written by a college prof based on his lectures. He presents the human psychology concepts that affect how people work with our UI in a simple to follow language and lots of examples. Most recommended read. 

Also while on the topic… Have you seen the 3.2B purchase of Nest by Google? There are many smoke detector and thermostat makers in the market but none look as neat as the Nest products or have the winning UI elements they managed to bring to these consumer tech elements that hung on our walls for the last 40 years. So you get your UI and functionality right and make it look neat you have a winning formula. Congratulations to Nest for getting it right.