Good GUI Design

Page 1 of 1

8 Replies - 6862 Views - Last Post: 27 September 2013 - 01:08 AM Rate Topic: -----

#1 synlight  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 90
  • View blog
  • Posts: 582
  • Joined: 14-September 11

Good GUI Design

Posted 23 September 2013 - 05:32 AM

I've been trying to find a good tut/article about specific GUI design questions and I'm not having much luck. Does anyone know of something? I know the basics,, but I have specific questions like, should all my Windows be the same size? If one Window has a lot more content than the rest of them (because of a viewing screen), how should I handle that? Make the smaller ones larger and use lots of empty space, or just live with one large screen in my application?

Most of the articles and such I have found aren't dealing with those sorts of questions.

Thank you!

Is This A Good Question/Topic? 0
  • +

Replies To: Good GUI Design

#2 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6504
  • View blog
  • Posts: 14,355
  • Joined: 02-June 10

Re: Good GUI Design

Posted 23 September 2013 - 05:49 AM

I can't really help with a resource on this but I can offer up a couple things...


"All my windows"... I'd point out that the trend in modern software is a single window with changing content. This can then encompass the other questions. If you only have one window, and you swap panels in a given area for... Configuration, editing, graphs, etc., then it is all still in the same window, so the amount of content doesn't matter as much. A little white space never hurt anyone.

I'd also mention that the bigger worry is varying screen resolutions. I've seen more and more software fail when it gets opened on a tablet, smart phone, embeded PC of some type etc. where the screen size was odd and the programmer never expected only 600x480 as a resolution so they didn't put in scrolling or scaling.

And remember that not everyone is 20 years old with good eyesight. I've taken to putting a trackbar in the status bar of my window, bound to the scaling of the panel showing the content. That way someone in their 50's can scale the content up and down with easy to make up for older eyes.

And a good portion of the population is color blind. So don't rely on just red versus green to let them know the status. An icon along with that color change does wonders.

But most of all, enjoy what you make while you think about the diversity of your users. There isn't so much a "should do" as a "what helps the user" mind set at work here. But let your creativity shine through. Photoshop doesn't look like Word. iTunes doesn't look like Flaming Widgets. And that's a good thing.
Was This Post Helpful? 2
  • +
  • -

#3 MrShoes  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 331
  • View blog
  • Posts: 512
  • Joined: 13-June 12

Re: Good GUI Design

Posted 23 September 2013 - 06:13 AM

I'd also suggest you take into consideration your favourite websites. They're created as if there is just one window of the same size which can be changed universally (the browser). Think about how a good website looks and feels. GUI design is not just visual; it's how things work together and how they're separated. For example, if I have to click more than 5 times to get somewhere, you've failed.
Was This Post Helpful? 2
  • +
  • -

#4 synlight  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 90
  • View blog
  • Posts: 582
  • Joined: 14-September 11

Re: Good GUI Design

Posted 23 September 2013 - 06:19 AM

Those are all excellent points, thank you!

I like the single window idea.

EDIT: I have another question, figured I should just ask it here.. so if I were to use the single window design, what control should I be opening my new views inside? Most of the views contain simple things like buttons, datagrids, etc. But there is one view that needs to display a remote connection to a device interface. I'm VERY new to WPF so I'm reading about controls every day.

So.. I need one main container in the window that will hold new content when a user wants to show a new view, correct? I'm thinking a ViewBox?

This post has been edited by synlight: 23 September 2013 - 06:26 AM

Was This Post Helpful? 0
  • +
  • -

#5 MrShoes  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 331
  • View blog
  • Posts: 512
  • Joined: 13-June 12

Re: Good GUI Design

Posted 23 September 2013 - 06:40 AM

I'd probably just write my own user control, bound to a ViewModel that holds a collection of available Views, has a CurrentView property which is the View being displayed, a selection of controls for switching Views, and some kind of Storyboard used for animating the transition.

This post has been edited by MrShoes: 23 September 2013 - 06:42 AM

Was This Post Helpful? 2
  • +
  • -

#6 synlight  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 90
  • View blog
  • Posts: 582
  • Joined: 14-September 11

Re: Good GUI Design

Posted 23 September 2013 - 06:43 AM

Wow I have no clue how to do any of that. Guess I need to learn, eh?
Was This Post Helpful? 0
  • +
  • -

#7 MrShoes  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 331
  • View blog
  • Posts: 512
  • Joined: 13-June 12

Re: Good GUI Design

Posted 23 September 2013 - 07:01 AM

We all start somewhere. Being willing to learn is the most important factor. What I described may seem complex now, but when you really get into WPF you'll find that sort of thing easy enough.
Was This Post Helpful? 1
  • +
  • -

#8 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6504
  • View blog
  • Posts: 14,355
  • Joined: 02-June 10

Re: Good GUI Design

Posted 25 September 2013 - 01:37 PM

View Postsynlight, on 23 September 2013 - 07:43 AM, said:

Wow I have no clue how to do any of that. Guess I need to learn, eh?


My generic approach is to this affect, with an ItemControl.

Spoiler


The actual Workspace XAML:
        <!--  #Region Workspace  -->
        <Border Margin="0,5,0,0"
                HorizontalAlignment="Stretch"
                BorderBrush="Black"
                BorderThickness="1"
                CornerRadius="3">
            <Border.LayoutTransform>
                <ScaleTransform ScaleX="{Binding Value, ElementName=sdrZoom}" ScaleY="{Binding Value, ElementName=sdrZoom}" />
            </Border.LayoutTransform>

            <DockPanel LastChildFill="True">
                <ScrollViewer VerticalAlignment="Stretch"
                              DockPanel.Dock="Top"
                              HorizontalScrollBarVisibility="Visible"
                              VerticalScrollBarVisibility="Visible">
                    <ItemsControl x:Name="WorkSpace"
                                  MinHeight="150"
                                  HorizontalAlignment="Stretch"
                                  VerticalAlignment="Stretch"
                                  HorizontalContentAlignment="Stretch"
                                  VerticalContentAlignment="Stretch">

                        <!--  Your controls here  -->


                        <!--  Your controls here  -->

                    </ItemsControl>
                </ScrollViewer>
            </DockPanel>
        </Border>
        <!--  #Endregion Workspace  -->


You can then simply swap out the contents of the workspace. Though the idea of a transition animation would be slick.
Was This Post Helpful? 1
  • +
  • -

#9 MrShoes  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 331
  • View blog
  • Posts: 512
  • Joined: 13-June 12

Re: Good GUI Design

Posted 27 September 2013 - 01:08 AM

Yes, that's a good way. You could also add the transition animation Storyboard as a Resource of the ItemsControl, then pass the two items need to be transitioned from/to when transition is needed. As a quick example, if you had an MVVM setup where your ItemControl was bound to a view model that had a Current and Next view property, you might have:
<ItemsControl Name="ItemView">
            <ItemsControl.Resources>
                <Storyboard x:Key="TransitionStoryboard">
                    <!-- Shrink this one. -->
                    <DoubleAnimation Storyboard.Target="{Binding Current}" Storyboard.TargetProperty="Width" To="0" Duration="0:0:1"/>
                    <!--Grow the next.-->
                    <DoubleAnimation Storyboard.Target="{Binding Next}" Storyboard.TargetProperty="Width" To="100" BeginTime="0:0:1" Duration="0:0:1"/>
                </Storyboard>
            </ItemsControl.Resources>
        </ItemsControl>


... or something like that. That's just off the top of my head, I'd need to test it works.

This post has been edited by MrShoes: 27 September 2013 - 07:15 AM

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1