Welcome to TalkGraphics.com
Page 10 of 14 FirstFirst ... 89101112 ... LastLast
Results 91 to 100 of 136
  1. #91
    Join Date
    May 2013
    Posts
    10

    Default Re: Interface Design and UX Thread - How our App Looks

    I have a couple of questions if you don't mind....

    1. Is there a particular font that is best suited for use on screen from a graphics perspective? I know that Calibri and Cambria are supposed to be good for documents, but what fonts/sizes would be best from a graphics perspective (I sure hope this is not one of those questions that everyone has a different idea of what is best and there is no consensus)?

    2. What screen resolution and dpi settings do most graphics folks use? Is it the standard 96dpi at 1920x1080 or something different?

    3. For a tool like this, do you want something small and compact that uses the least amount of screen real-estate or something larger, or does it matter?

    Thanks,

    Eric

  2. #92
    Join Date
    Jan 2004
    Location
    Holland Patent, NY, USA
    Posts
    605

    Default Re: Interface Design and UX Thread - How our App Looks

    Here are a couple of mockups using slight variations of the excellent artwork and concepts from several of the posts here.

    Frank's (very nice) cube logo could also be easily integrated with this design.

    Click image for larger version. 

Name:	XaRT-UI-Mockup-01.jpg 
Views:	232 
Size:	57.4 KB 
ID:	96639
    Click image for larger version. 

Name:	XaRT-UI-Mockup-02.jpg 
Views:	232 
Size:	62.4 KB 
ID:	96640

  3. #93
    Join Date
    Sep 2000
    Location
    Bracknell, UK
    Posts
    8,656

    Default Re: Interface Design and UX Thread - How our App Looks

    About those designs.

    The user is given the option to turn an option ON or OFF, but is presented with a tick to indicate the default value.

    I think the default value should also be presented in exactly the same terms - ON or OFF, not a mix.

    It seems to me that there is a conflict with using ON and OFF and having a logo that displays an X as a tick ( ie you want to use ON and OFF to represent choices, yet want the logo representation to show another form of choice).

    Another observation. Recently I worked on quite a large project adding an alternative language to an iPad application. The original intention had been to load new language strings for localisation. The app was very sensitive aesthetically to layout and in the end I had to manually edit all of the text with the alternative.

    I can confirm that when compared to English, italian may be beautiful to hear, but it requires (generally) more text to say the same message as in English, so it was a pain to have to re-layout the text and sometimes re-size it.

    In an app with multiple language support, the layout may be difficult to preserve between languages and ON and OFF may not be quite so small, etc..
    Last edited by pauland; 13 June 2013 at 07:38 AM.

  4. #94
    Join Date
    Oct 2002
    Location
    Liverpool, N.Y.
    Posts
    5,955

    Default Re: Interface Design and UX Thread - How our App Looks

    Quote Originally Posted by EricB View Post
    There are definite drawbacks to using bitmap images as controls, the biggest being that when the application is resized, the bitmap may become "fuzzy" and hard to read.

    Eric
    Hi Eric and welcome to the discussion.

    I for one am against compromising a good UI design just because the programmers have opted for a default library of common controls to avoid using bitmaps.

    The bitmap parts of the UI don't have to scale, they can remain at the size they were written to, or (and I'm professing ignorance here) many icons for desktop applications have multiple resolution images bound into one *.ico file. And what Windows usually does with this is if you have a 48 x 48 space defined, the appropriate icon within the wrapper is called. and 32 x 32, and 256 x 256 and so on.

    So perhaps the controls need to be written to bitmap at various sizes.

    I believe we need creative solutions to avoid interface ugliness. True Confession: I'm a designer and I work most comfortable with a program that has a pleasant, and occasionally inspiring interface. I stopped using Painter for about two revs because Corel Corporation destroyed the lovely, and intuitive UI the original three programmer/artists had created.

    A lot of the chat on the "Dear Xara" thread and others are about how we either love or detest the "Dark UI".

    Fit and finish is an important topic and I'm happy that we have this area to discuss the pros and cons of the fit and finish.

    By Best,

    Gary

  5. #95
    Join Date
    Jan 2004
    Location
    Holland Patent, NY, USA
    Posts
    605

    Default Re: Interface Design and UX Thread - How our App Looks

    Quote Originally Posted by pauland View Post
    In an app with multiple language support, the layout may be difficult to preserve between languages and ON and OFF may not be quite so small, etc..
    Agree. This is a concern and something to be considered...

  6. #96
    Join Date
    Jan 2006
    Location
    Los Angeles
    Posts
    945

    Default Re: Interface Design and UX Thread - How our App Looks

    I really like your second one. especially the tabs and the idea of pictures in the help. I can see what Paul means about on/off vs a tick. As for internationalization, having the text following the on/off box etc. gives you more flexibility, and I think the WPF gives us scalability..
    All you designers seems to lean towards dark colours. Is this the vogue? I suppose skinning can solve that.
    Quote Originally Posted by StevenWWinters View Post
    Here are a couple of mockups using slight variations of the excellent artwork and concepts from several of the posts here.

    Frank's (very nice) cube logo could also be easily integrated with this design.

    Click image for larger version. 

Name:	XaRT-UI-Mockup-01.jpg 
Views:	232 
Size:	57.4 KB 
ID:	96639
    Click image for larger version. 

Name:	XaRT-UI-Mockup-02.jpg 
Views:	232 
Size:	62.4 KB 
ID:	96640
    Grace
    http://gracehjs.com/
    Xara Software XDP11

  7. #97
    Join Date
    May 2002
    Location
    Liverpool, NY
    Posts
    2,314

    Default Re: Interface Design and UX Thread - How our App Looks

    I don't understand, what the check mark in the default column means.

    1. Does it mean that the toggle or the value that is currently set to the left is set at the default, shipping value?
    2. Or that there is a default setting but we are not saying what it is?
    3. Or that we want to return the setting to the default?
    4. And if I want to change the default value do I need to somehow need to unlock or uncheck the default check mark in the default column?

    I'm assuming it means the first and that it will auto adjust (become unchecked) if I change the value, but I think this has to be made clear.

    Also is there a way to return a value to the default instead of trying to figure out or remember that it was 14?



    Barbara Bouton
    TalkGraphics Forum Administrator

    The Xara Xone website developer. | TheBoutons.com

  8. #98
    Join Date
    Oct 2002
    Location
    Liverpool, N.Y.
    Posts
    5,955

    Default Re: Interface Design and UX Thread - How our App Looks

    @Steve,

    There are two things I'd like to mention from an art and a usability thing, three, actually:

    The example you posted is indeed dark. In fact, it's too dark. And changing colors to present a different theme is a matter of a few degrees. Example? Xara DP's "Dark UI" would be much more legible is they lightened the dark grey only 5%.

    Also, I really wish we'd "give it up" with visual allusions to a brush tool; the double-entende of the checkmark integrating into the "x" is now gone with that brush drawing sprouting out of the upper right "leg". Xara is a drawing program, it will always primarily be a drawing program without some major recoding, so if we use an art implement at all, it'd be a pen or a pencil, no?

    The sliders and buttons are over-rendered in the example above. You don't need gradients on a toggle that's supposed to look like metal for people to get the idea that it's a toggle switch. It over-complicates the art, it's a visual distraction, we've all been working toward K.I.S.S. for weeks now!

    You make an overall UI look hodge-podge when one element is rendered perfectly down to a screen pixel while other areas are flat.

    I like the UI, Steve, in its general presentation and organization, but when web nerds talk about "fit and finish", they're talking about getting stuff right down to the last pixel, and there are still some medium to small embellishments I disagree with as an artist.

    And I really appreciate all the feedback, creative ideas, and spirit of sharing as we progress, so if there's any negativity in this post, please attribute it to a lousy breakfast or not winning the lottery or something, okay?

    My Best,

    Gary

  9. #99
    Join Date
    Jan 2004
    Location
    Holland Patent, NY, USA
    Posts
    605

    Default Re: Interface Design and UX Thread - How our App Looks

    Quote Originally Posted by Barbara B View Post
    I don't understand, what the check mark in the default column means.
    Good question. The answer is #1. It is simply an indicator that the setting displayed is the default for a fresh install of Xara. No check mark means that the registry setting has been modified from the default. There may be other or better ways to communicate this, so as always, suggestions are welcome.

    The four buttons in the upper right would provide these functions:

    Single check mark: Set the selected setting to default.
    Four check marks: Set all settings to default.
    Single undo arrow: Undo the changes to the selected setting.
    Four undo arrows: Undo all changes for the active session.

    Whether these will get implemented is yet to be decided. They are merely options that made sense to me.

    Also, note that the circle with arrow at the bottom (2nd mockup) is meant to be a button that will expand to display the registry path for the selected setting, for those interested in such things. See 1st mockup to see the registry path being displayed.

    Other comments:

    It doesn't follow for me that the check mark logo requires that at checkbox be used for yes/no or on/off type settings. The logo is simply meant to relate that the program allows setting changes, of which there are several types, not just those that can be represented by a check mark. A checkbox could be used, but it isn't essential. Also, I think that there needs to be a distinction between how an on/off setting is toggled and the default values are reset.

    Regarding color: As has been commented already, color preferences tend to be very subjective. Not sure what to do about that other than to have as many ideas put forth as people are willing to contribute. These two mockups are built around the grey of the logo used and variations of the Asus router colors I posted earlier. If anyone wants to play with different color combinations using the same layout, I can post the .xar file. There are several named colors that could be easily adjusted. The buttons are live copies which allow for quick changes as well.

    Also, I've noticed huge differences as I've viewed the same image on different monitors. On one monitor it can look fine while on another it appears much darker with poorer contrast. Not sure what the answer is there but those better versed in proper color combinations probably do.

    Another challenge of the attempting a graphically rich design, is that screen real estate can quickly become an issue. Hence the scroll bar in these two mockups. In the same vein, the concern about localization is valid.

    Hope this helps...

  10. #100
    Join Date
    May 2002
    Location
    Liverpool, NY
    Posts
    2,314

    Default Re: Interface Design and UX Thread - How our App Looks

    As to EricB's question:

    1. Is there a particular font that is best suited for use on screen from a graphics perspective? I know that Calibri and Cambria are supposed to be good for documents, but what fonts/sizes would be best from a graphics perspective (I sure hope this is not one of those questions that everyone has a different idea of what is best and there is no consensus)?
    Calibri and Cambria are Windows fonts from at least Win7 and on. But they do belong to MS.

    As an open source project, I suggest that we use an open source font.

    Here are a few that look good to me. All are free on Google Fonts and work with Xara. I think we want to pick a font with a lot of styles so we can coordinate the interface with the apps download site and other collateral. Right now Open Sans would be my pick because it is a large family with a condensed variants which can come in handy.


    Lato 10 styles (no narrow or condensed version)Łukasz Dziedzic

    SIL Open Font License, 1.1

    Source Sans Pro 12 Styles (no condensed)

    Paul D. Hunt

    SIL Open Font License, 1.1
    Source® Sans Pro, Adobe's first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.

    Open Sans
    10 styles
    Open Sans

    Steve Matteson

    Apache License, version 2.0Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.

    Open Sans Condensed 3 styles
    Open Sans Condensed

    Steve Matteson

    Apache License, version 2.0Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.
    Barbara Bouton
    TalkGraphics Forum Administrator

    The Xara Xone website developer. | TheBoutons.com

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •