Sliding Button & Window Specification

Author: Josef Pavlicek

$Revision: 1.10 $
$Date: 2007/03/08 11:07:34 $

$Id: SlidingButtonSpecification.html,v 1.10 2007/03/08 11:07:34 josefpavlicek Exp $ (see full CVS history)

Content

 

Requirements

Motivation

From various Usability Studies and from some blogs we received that more of our users are not able to understand the sliding buttons. We should focus our force for redesign these buttons and behavior of the system after click on them.

 

Goal

Our goal is redesign buttons and the system behavior according to the users requirements.

NetBeans behavior and design

NetBeans behavior

The system has to give the user information what he does. The system has to show, where is the window located, after the user action. This information has to be easy to understand and "elegant". In this case of slides and hidden window is the best way how to tell the user, what the system does, is show him/her:

  1. minimalization or expansion of the docked or slides window. This minimalization and expansion shouldn't take more than 1,5 second.
  2. shadow (transparent shadow is the best solution) by each sliding window

The system should support these Use Cases:

  1. Auto Hide button Use Case (Figure 7 )
  2. Auto Showing window Use Case (Figure 7 )
  3. Showing hidden window Use Case (Figure 7 )
  4. Dragging of windows (Figure 8)

 

New NetBeans design

Improving of the sliding window appearance

If the user uses sliding window in NetBeans now, the system shows him sliding window with appearance -Figure 1 .

This window doesn't have:

  • sliding effect
  • dragger edge
  • shadow

Figure 1. Current appearance of the sliding window

 

To add dragger edge, shadow (transparent shadow if is it possible thanks performance load), sliding effect (Figure 2, 7, 8) is improving in comparison with the current situation.

Figure 2. Model of assembling the new sliding window and its appearance

 

 

Figure 3. New appearance of sliding window

 

The NetBeans IDE should show sliding and expanding effect. For the purpose of this effect the system has to use special windows. These windows have only frame with shadow and white body and header - figure 4,5.

Figure 4. Window for expanding and hiding the left or right column (project, files, etc.)

 

Figure 5. Window for expanding and hiding the down windows in the tabs(Output etc.)

Figure 6 . Colors of the windows

 

 

 

Sliding, docking and dragging effect examples

These examples show how the NetBeans IDE can support the written Use Cases. These models are running on the never ending loop.

  • Sliding effect
    • The system shows expanding and minimalization effect. This effect shows the user, where is the window located after his/her click.
  • Docking effect
    • The system shows minimalization effect. This effect shows the user, where is the window located after his/her click.
  • Dragging effect
    • The system shows the user new size of his/her window after his/her dragging.

 

Figure 7. Minimalization of the window on the edge bar

 

 

Figure 8. Docking the sliding window - example

 

 

NetBeans draggers and L&F appearance

Windows XP

Now NetBeans doesn't have draggers between windows edges Figure 9.

Figure 9. The current appearance of NetBeans IDE

 

The improve in comparison with the current appearance is that the user is able to better understand, that the edges between the windows are resizable Figure 10. For draggers we will use default size. All draggers are centralized on the edge.

 

Figure 10. Draggers in NetBeans IDE - draggers have shape of rectangle with five circles

 

 

NOTICE: All draggers placed in NetBeans should be taking from operation system. Gray scales are only for information or if the particular operation system doesn't have system draggers.

Figure 11. Appearance of the dragger on Windows XP and gray scale settings.

 

 

Windows classics

Figure 12. Appearance of the draggers in Windows classics - the draggers have shape of rectangle

 

Figure 13. Appearance of the dragger and gray scale settings

 

 

MAC OS

Figure 14. Appearance of draggers in the MAC OS- draggers have a shape of circle

 

Figure 15. Appearance of the dragger and gray scale settings

 

 

Solaris OS and Metal windows L&F

Figure 16. Appearance of draggers in Solaris draggers have shape of rectangle with three circles

 

Figure 17. Appearance of draggers in Metal windows- draggers have shape of rectangle with three circles

 

Figure 18. Appearance of the dragger and gray scale settings

 

 

 

Project Features

About this Project

ui was started in November 2009, is owned by Jiří Kovalský, and has 37 members.
By use of this website, you agree to the NetBeans Policies and Terms of Use (revision 20140418.2d69abc). © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo
 
 
Close
loading
Please Confirm
Close