RE: Clean Slate - Modern User Experience.

[Lo via 4D_Tech]

Hi Chaps

Thanks Peter and Tim.
4D UI - spaghetti soup I sometimes bump into...
Often hard...

>> Things to avoid:
>> 
>> Ambiguity (e.g. colour coded text)

> This is a good point because there are more color blind people out there than 
> you know. More men are color blind than women. So always include a style like 
> bold or italic or underline with a color so the color blind user is not left 
> out.

And in this part of the world we even have people who are colour blind - but 
they can spell 
People of northern European origin: about 8% of men will be red/green colour 
blind.
This also varies by race of course - Colour blindness is almost unknown in the 
Inuit people. But I suppose they see mostly white anyway.
And how often do we see coloured text? Green = good,  Red =  bad? Too often I 
suggest.
I'd also suggest we all give a thought to text size.
I've seen far too many 4D systems with text I can't read easily. Remember the 
fat old men! A demographic I, and a few others on this list, belong to.
It's perhaps more common from Mac based developers deploying on PCs? An 
historic difference between the two platforms?


>> Redundancy (e.g. buttons with both an icon AND a label)

> I disagree on this. I think it is best to include a label with an icon. Just 
> because it is obvious to you what the icon means doesn’t mean a new user will 
> have the same understanding. One or 2 words next to an icon makes the 
> function obvious to new users. And the experienced user will ignore the label 
> and their > eyes will naturally focus on the icon image. They don’t even see 
> the label anymore.

I'm with Tim on this one.
For redundancy read dis-ambiguity (is that even a word).
Iconography is culture bound. What may seem obvious to you may be obscure, or 
even worse, have a different meaning, in a different cultural context.
We have a system we have deployed in various parts of the world, and I've had 
questions about the meanings of a few icons I thought were self-explanatory 
from some of our middle-east customers.
I've no idea how these would work in the far-east!

I'm sure we all have a section on the bookshelves with a 'work' section?
Code complete...
Pragmatic programmer...
Et al...

For UI?
Title: Understanding Comics
Author: Scott McCloud
For comics read graphic/picture/icon...
Yes, it's a big comic about comics, but UI should be fun?

Love and kisses
Lo

**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

​Re: Clean Slate - Modern User Experience

[steve simpson via 4D_Tech]

> On Apr 17, 2017, at 8:47 AM,Peter Jakobsson wrote:
>
> > Doesn’t the O/S define ‘modern era’ ?
> >
> > If you stick to vanilla 4D objects (i.e. just the raw button styles,
> list styles & fields etc) then the O/S will do all the work for you in
> keeping your screens up to date.
>

​+1​


Steve Simpson
​Cimarron Software
**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: Clean Slate - Modern User Experience

[info--- via 4D_Tech]

mixing all current 4D technologies



O r t w i n Z i l l g e n
-
Mitglied des Entwicklernetzwerkes www.die4dwerkstatt.de

**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: Clean Slate - Modern User Experience.

[Benedict, Tom via 4D_Tech]

Peter Jakobsson responds:



>> Where could I go to see samples of what folks are doing with 4D which brings 
>> the UI into the modern era? Any thoughts?



>Doesn't the O/S define 'modern era' ?



I couldn't agree more. If you are using 4D "client" for your app, create style 
sheets and leverage the platform wherever you can. That automatically keep your 
app 'modern', plus it makes it very easy to support multiple platforms and OSs.



A few random thoughts:



-  I've seen some nice 'hybrid' UIs, which include Web Areas for 
navigation and 4D objects for data.



-  Like Mitchell points out, don't get too carried away with color. 
Limit your palette and make sure the different colors are used consistently.



-  Decide whether you want to use application menus. Make it extremely 
obvious to the user when to use menu items and when to use form controls. You 
may even decide to not use menus at all.



-  Consider hiring a UX designer for a few months to analyze your app 
and set up a style guide and screen templates.



Tom Benedict

Optum

This e-mail, including attachments, may include confidential and/or
proprietary information, and may be used only by the person or entity
to which it is addressed. If the reader of this e-mail is not the intended
recipient or his or her authorized agent, the reader is hereby notified
that any dissemination, distribution or copying of this e-mail is
prohibited. If you have received this e-mail in error, please notify the
sender by replying to this message and delete this e-mail immediately.
**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: Clean Slate - Modern User Experience

[Tim Nevels via 4D_Tech]

On Apr 17, 2017, at 8:47 AM,Mitchell Shiller  wrote:

> If you would like I can send you some sample pages to better understand what 
> I am saying.

I’m interested in seeing some sceenshots of your new user interface. 

Tim


Tim Nevels
Innovative Solutions
785-749-3444
timnev...@mac.com


**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: Clean Slate - Modern User Experience

[David Adams via 4D_Tech]

Mitchell,

Thanks a lot for sharing your thoughts about the goals and concepts you
kept in mind while developing your design charter, and for taking the time
to share some real examples.

Very much appreciated.


On Mon, Apr 17, 2017 at 10:31 AM, Mitchell Shiller via 4D_Tech <
4d_tech@lists.4d.com> wrote:

> As requested, I have posted a link to a folder with some samples:
>
> https://www.dropbox.com/sh/3rhyxaaqok0in2m/AADJZmWfoRTpTDuoC08a951ra?dl=0
>
> In it you will find;
> 1) The Spectrum palette I use for this project
> 2) The same palette ported to the OS Color Picker
> 3) Dialog - this is a basic detail form
> 4) List Form- this is my basic list form.
> 5) Detail Form - I have blocked out some of the detail in the subform -
> for privacy reasons.
> 6) Detail - Icons hidden - when you navigate to the first or last record
> the icons are hidden
> 7) Detail Form - Additional Panels - how I add additional functions to a
> detail view
> 8) List View - Extra Panels -  how I add additional functions to a list
> view
>
> My toolbars  for both List and Detail view are always in blue.
> Ny toolbars are inherited Project Forms, with my code that automatically
> hides or show or adds additional icons / buttons depending on the data
> found in a configuration object that defines each process. The
> configuration object is stored in the Resources folder. All I do is
> configure the object, and launch a generic process which defines the type
> of process, data columns, fonts, buttons, etc.
> The icons are 4 state.
> My panels have  purple headers and white buttons. Icons are purple with a
> flat motif.
> All of my labels  /headers are grey- visible but don’t attract attention.
> The data is what you want the user to focus on. Whenever possible I use
> placeholders.
>
> Hope this helps
>
> Mitch
>
> **
> 4D Internet Users Group (4D iNUG)
> FAQ:  http://lists.4d.com/faqnug.html
> Archive:  http://lists.4d.com/archives.html
> Options: http://lists.4d.com/mailman/options/4d_tech
> Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
> **
>
**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: Clean Slate - Modern User Experience

[Mitchell Shiller via 4D_Tech]

As requested, I have posted a link to a folder with some samples:

https://www.dropbox.com/sh/3rhyxaaqok0in2m/AADJZmWfoRTpTDuoC08a951ra?dl=0

In it you will find;
1) The Spectrum palette I use for this project
2) The same palette ported to the OS Color Picker
3) Dialog - this is a basic detail form
4) List Form- this is my basic list form.
5) Detail Form - I have blocked out some of the detail in the subform - for 
privacy reasons.
6) Detail - Icons hidden - when you navigate to the first or last record the 
icons are hidden
7) Detail Form - Additional Panels - how I add additional functions to a detail 
view
8) List View - Extra Panels -  how I add additional functions to a list view

My toolbars  for both List and Detail view are always in blue.  
Ny toolbars are inherited Project Forms, with my code that automatically hides 
or show or adds additional icons / buttons depending on the data found in a 
configuration object that defines each process. The configuration object is 
stored in the Resources folder. All I do is configure the object, and launch a 
generic process which defines the type of process, data columns, fonts, 
buttons, etc.
The icons are 4 state.
My panels have  purple headers and white buttons. Icons are purple with a flat 
motif.
All of my labels  /headers are grey- visible but don’t attract attention. The 
data is what you want the user to focus on. Whenever possible I use 
placeholders.

Hope this helps

Mitch

**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: Clean Slate - Modern User Experience.

[Peter Jakobsson via 4D_Tech]

On 15 Apr 2017, at 09:49, rooftop99--- via 4D_Tech <4d_tech@lists.4d.com> wrote:

> Where could I go to see samples of what folks are doing with 4D which brings 
> the UI into the modern era? Any thoughts?

Doesn’t the O/S define ‘modern era’ ?

If you stick to vanilla 4D objects (i.e. just the raw button styles, list 
styles & fields etc) then the O/S will do all the work for you in keeping your 
screens up to date.

The only area I can think of where there’s room for creativity in this area is 
in toolbar icons. I find those a real headache because it’s very difficult to 
get hold of a set that’s:

A. intended for desktop, not web
B. comprehensive enough to cover all you need and doesn’t need too much 
Photoshop ‘hacking’
C. works on both Windows and Mac
D. covers at least 2 sizes - standard and ‘tiny’

Things to avoid:

Ambiguity (e.g. colour coded text)
Redundancy (e.g. buttons with both an icon AND a label)
Multiple Emphasis (e.g. giving priority to more than 1 function on a form)

As a general rule of thumb, the less distinguishable from the MacOS itself (or 
the Windows OS if thats your preferred) the more you know you’ve got the right 
solution.

Regards

Peter

**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: Clean Slate - Modern User Experience

[rooftop99--- via 4D_Tech]

Thank you Mitch.  Very helpful!!  I would love to see some sample pages...

Best!
Kirk



> On Apr 16, 2017, at 12:54 PM, Mitchell Shiller via 4D_Tech 
> <4d_tech@lists.4d.com> wrote:
> 
> Kirk,
> 
> I just re-did the UI of my application. 
> Here are a few tips form my experience.
> 
> 1) Start by picking a color palette of 4-6 colors. I use Spectrum- great app 
> for selecting colors  based on their relationship- monochromatic, analogous, 
> complementary etc.
> Make a table and decide which colors you will use for which form elements- 
> headers, buttons etc.
> 
> 2) Google modern UI or Flat UI and look thru the images and choose a style 
> that appeals to you.
> 
> 3) For icons, I use Picons. Low cost, royalty-free icons. These work 
> perfectly with Sketch. A great app for modifying the icons or creating 2 or 4 
> state icons.
> 
> 4) The most important thing I learned about design was from Roland Lannuzel 
> who co-wrote 4D Write Pro. He stressed that in good design, “Less is best”.  
> I went through all of my forms and removed divider lines, boxes. etc.  The 
> result is easier to design, build etc. I was shocked about what I removed. No 
> more sunken effect. No borders around list boxes. 
> 
> 5) I define a grid ahead of time and decide the size of all elements. e.g. 20 
> pixels blank border for all elements from the side of the window. 10 pixels 
> between groups of data.  All buttons are 100 pixel wide unless absolutely 
> necessary.  I have rules for how I align elements, so that each page looks 
> very similar.
> 
> 6) On a personal not I like to have white text on a colored background for 
> headers. I like the various elements of form to look like they “float” on the 
> page. No defined border.
> 
> If you would like I can send you some sample pages to better understand what 
> I am saying.
> 
> Mitch
> **
> 4D Internet Users Group (4D iNUG)
> FAQ:  http://lists.4d.com/faqnug.html
> Archive:  http://lists.4d.com/archives.html
> Options: http://lists.4d.com/mailman/options/4d_tech
> Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
> **

**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: Clean Slate - Modern User Experience

[Mitchell Shiller via 4D_Tech]

Kirk,

I just re-did the UI of my application. 
Here are a few tips form my experience.

1) Start by picking a color palette of 4-6 colors. I use Spectrum- great app 
for selecting colors  based on their relationship- monochromatic, analogous, 
complementary etc.
Make a table and decide which colors you will use for which form elements- 
headers, buttons etc.

2) Google modern UI or Flat UI and look thru the images and choose a style that 
appeals to you.

3) For icons, I use Picons. Low cost, royalty-free icons. These work perfectly 
with Sketch. A great app for modifying the icons or creating 2 or 4 state icons.

4) The most important thing I learned about design was from Roland Lannuzel who 
co-wrote 4D Write Pro. He stressed that in good design, “Less is best”.  I went 
through all of my forms and removed divider lines, boxes. etc.  The result is 
easier to design, build etc. I was shocked about what I removed. No more sunken 
effect. No borders around list boxes. 

5) I define a grid ahead of time and decide the size of all elements. e.g. 20 
pixels blank border for all elements from the side of the window. 10 pixels 
between groups of data.  All buttons are 100 pixel wide unless absolutely 
necessary.  I have rules for how I align elements, so that each page looks very 
similar.

6) On a personal not I like to have white text on a colored background for 
headers. I like the various elements of form to look like they “float” on the 
page. No defined border.

If you would like I can send you some sample pages to better understand what I 
am saying.

Mitch
**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: Clean Slate - Modern User Experience.

[Keisuke Miyako via 4D_Tech]

Hello,

if you could spare some time to go through the various "HDI" examples,
especially those themes on the listbox,
I think it would be a good way to get tuned with the current development styles 
in 4D.

ftp://ftp.4d.com/SAMPLE_DATABASES/4D/

HTML/SVG/Objects are obviously modern and cool,
but on balance,
I think the listbox by far gives the best return on investment
if your are going the build a C/S business app ground up.

2017/04/15 16:49、rooftop99--- via 4D_Tech 
<4D_Tech@lists.4d.com> のメール：
Where could I go to see samples of what folks are doing with 4D which brings 
the UI into the modern era? Any thoughts?



**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Clean Slate - Modern User Experience.

[rooftop99--- via 4D_Tech]

Hi All,

After years of working with large legacy systems where their roots were based 
in 4D v3 or earlier, I am faced with a rare opportunity to create a substantial 
application - ground up.  I would like the end product to have a modern UI.  It 
is a multi-user system.  I plan to use a server/client architecture (but I also 
may consider a web server/client approach…).

Where could I go to see samples of what folks are doing with 4D which brings 
the UI into the modern era? Any thoughts?

As always, thanks in advance for your input!
Kirk


**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**