[prev in list] [next in list] [prev in thread] [next in thread]
List: kde-core-devel
Subject: Re: [Patch] System Settings : Improve General/Advanced tabs visibility
From: "Nicolas Ternisien" <nicolas.ternisien () gmail ! com>
Date: 2008-03-27 1:25:51
Message-ID: ccba71b50803261825h4ab541d1s2f87f9f475cbffb7 () mail ! gmail ! com
[Download RAW message or body]
[Attachment #2 (multipart/alternative)]
Your mail was really interested Torsten, and I would like to specify the
reason why I submit the first patch for System Settings : This is only
because, in any other places in KDE, tabs which display many important
information (not 2 or 3 useless options) are never as small as the System
Settings tabs were.
And I'm not only talking about the Advanced tab, but also about the General
tab, which was not really easy to see too.
Here is a new proposal, which follow the mockup of Michael, that I like too=
.
I've also _artificially_ increase the button size by adding the Settings
word for each text, which makes them more important. The other advantage of
this displaying is that even if the user is in a KCM module, it can still
see where he is, and directly switch between modules.
The font size and icons are not anymore problematic because font size is
standard, and all toolbar actions use icons.
http://stuff.forum-software.org/kde/systemsettings-after3.png
http://stuff.forum-software.org/kde/systemsettings-after4.png
Cheers.
On Wed, Mar 26, 2008 at 7:59 PM, Torsten Rahn <torsten.rahn@credativ.de>
wrote:
> On Wednesday 26 March 2008 17:00:24 Michael Lentner wrote:
> > Updated mockup:
> > http://img256.imageshack.us/img256/5748/systemsettings2ym9.png
>
> Well, although I do have quite some experience with visual design I get
> more
> and more the impression that Nicolas et al. are trying to fix an issue
> that
> doesn't match the requirements of our target user base.
>
> I haven't seen any explanation on what is supposed to get fixed and this
> is of
> course something that needs to get discussed before coming up with (in
> this
> case IMHO rather dubious) solutions.
>
> Dialogs need to have a clear structure which guides the target user by
> means
> of a clear layout and proper usage of markups. Obviously the more
> important
> things should be set bold and if they are items that are supposed to be
> clicked often they should have icons. The original version of the dialog,
> i.e. the one before Nicolas sent his first patch, did this pretty well an=
d
> looked pretty decent (That being said I wouldn't claim that a better
> solution doesn't exist however I haven't seen one so far).
>
> Now, what should get put into an advanced tab? Stuff that is supposed to
> be
> not relevant for most people (think of maybe 90%). And even for the
> remaining
> 10% the stuff that gets displayed under "Advanced" is only relevant in
> very
> few cases. So it's pretty likely that "Advanced" gets clicked maybe in
> about
> 1% of the cases where "Systemsettings" gets started by some random user.
> Keep
> in mind that the term "Advanced" doesn't necessarily indicate that a user
> will make more use of a setting the more his experience grows. It just
> indicates that there's a rather special need that can get fullfilled by
> choosing the "Advanced tab".
>
> Now the first version that Nicolas came up with increased the text size,
> boldness, added icons, increased the "hit size" of the tabs and I'm
> convinced
> that he would have added sound cues to it if it would have been easy
> enough
> to do it (of course I'm exaggerating with the latter).
> This resulted in a "General/Advanced - tab" appearance that was equally o=
r
> more prominent than other clearly more important and more clicked items
> which
> get displayed by the settings dialog as well. This is bad because
> over-usage
> of bold/large/icon-accompagnied labels is one of the reasons that KDE get=
s
> often criticized for clutter. If every item gets its icon and bold/large
> font then the usage of these markups is defeated and you get a clutterful
> look where every item on the screen tries to punch into your face in a
> fight
> for more visibility.
>
> A good layout with only prominent icons being styled in a more obvious wa=
y
> will enable an advanced user to find "his" advanced tab more easily. Even
> if
> the advanced tab shows up as a plain normal tab entry without bells and
> whistles in the user interface. Why? Because an "advanced" user knows muc=
h
> better what to look for and where stuff gets "hidden" that is used more
> rarely. Being sensitive he will be much more easily able to find things i=
n
> a
> dialog with a clear layout and structure than in a dialog where people
> have
> been fighting for "visibility" of their personal pet peeve (and where as =
a
> result all the items are "fighting" for visibility one over the other).
>
> Additionally in terms of artwork I don't think that any of
> the "g/a-t-visibility"-proposals that I've seen so far has matched the
> intended style for "Oxygen" as well as the original status did. I think
> that
> all of them have looked inferior.
>
> Best wishes,
>
> Torsten
>
> --
> Torsten Rahn
>
> Tel.: 0 21 61 - 46 43 - 192
>
> credativ GmbH, HRB M=F6nchengladbach 12080
> Hohenzollernstr. 133, 41061 M=F6nchengladbach
> Gesch=E4ftsf=FChrung: Dr. Michael Meskes, J=F6rg Folz
>
[Attachment #5 (text/html)]
Your mail was really interested Torsten, and I would like to specify the reason why I \
submit the first patch for System Settings : This is only because, in any other \
places in KDE, tabs which display many important information (not 2 or 3 useless \
options) are never as small as the System Settings tabs were. <br> <br>And I'm \
not only talking about the Advanced tab, but also about the General tab, which was \
not really easy to see too.<br><br>Here is a new proposal, which follow the mockup of \
Michael, that I like too. I've also _artificially_ increase the button size by \
adding the Settings word for each text, which makes them more important. The other \
advantage of this displaying is that even if the user is in a KCM module, it can \
still see where he is, and directly switch between modules.<br> <br>The font size and \
icons are not anymore problematic because font size is standard, and all toolbar \
actions use icons.<br><br><a \
href="http://stuff.forum-software.org/kde/systemsettings-after3.png">http://stuff.forum-software.org/kde/systemsettings-after3.png</a><br>
<a href="http://stuff.forum-software.org/kde/systemsettings-after4.png">http://stuff.forum-software.org/kde/systemsettings-after4.png</a><br><br>Cheers.<br><br><div \
class="gmail_quote">On Wed, Mar 26, 2008 at 7:59 PM, Torsten Rahn <<a \
href="mailto:torsten.rahn@credativ.de">torsten.rahn@credativ.de</a>> wrote:<br> \
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); \
margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div class="Ih2E3d">On Wednesday 26 \
March 2008 17:00:24 Michael Lentner wrote:<br> > Updated mockup:<br>
> <a href="http://img256.imageshack.us/img256/5748/systemsettings2ym9.png" \
target="_blank">http://img256.imageshack.us/img256/5748/systemsettings2ym9.png</a><br>
<br>
</div>Well, although I do have quite some experience with visual design I get \
more<br> and more the impression that Nicolas et al. are trying to fix an issue \
that<br> doesn't match the requirements of our target user base.<br>
<br>
I haven't seen any explanation on what is supposed to get fixed and this is \
of<br> course something that needs to get discussed before coming up with (in \
this<br> case IMHO rather dubious) solutions.<br>
<br>
Dialogs need to have a clear structure which guides the target user by means<br>
of a clear layout and proper usage of markups. Obviously the more important<br>
things should be set bold and if they are items that are supposed to be<br>
clicked often they should have icons. The original version of the dialog,<br>
i.e. the one before Nicolas sent his first patch, did this pretty well and<br>
looked pretty decent (That being said I wouldn't claim that a better<br>
solution doesn't exist however I haven't seen one so far).<br>
<br>
Now, what should get put into an advanced tab? Stuff that is supposed to be<br>
not relevant for most people (think of maybe 90%). And even for the remaining<br>
10% the stuff that gets displayed under "Advanced" is only relevant in \
very<br> few cases. So it's pretty likely that "Advanced" gets clicked \
maybe in about<br> 1% of the cases where "Systemsettings" gets started by \
some random user. Keep<br> in mind that the term "Advanced" doesn't \
necessarily indicate that a user<br> will make more use of a setting the more his \
experience grows. It just<br> indicates that there's a rather special need that \
can get fullfilled by<br> choosing the "Advanced tab".<br>
<br>
Now the first version that Nicolas came up with increased the text size,<br>
boldness, added icons, increased the "hit size" of the tabs and I'm \
convinced<br> that he would have added sound cues to it if it would have been easy \
enough<br> to do it (of course I'm exaggerating with the latter).<br>
This resulted in a "General/Advanced - tab" appearance that was equally \
or<br> more prominent than other clearly more important and more clicked items \
which<br> get displayed by the settings dialog as well. This is bad because \
over-usage<br> of bold/large/icon-accompagnied labels is one of the reasons that KDE \
gets<br> often criticized for clutter. If every item gets its icon and \
bold/large<br> font then the usage of these markups is defeated and you get a \
clutterful<br> look where every item on the screen tries to punch into your face in a \
fight<br> for more visibility.<br>
<br>
A good layout with only prominent icons being styled in a more obvious way<br>
will enable an advanced user to find "his" advanced tab more easily. Even \
if<br> the advanced tab shows up as a plain normal tab entry without bells and<br>
whistles in the user interface. Why? Because an "advanced" user knows \
much<br> better what to look for and where stuff gets "hidden" that is used \
more<br> rarely. Being sensitive he will be much more easily able to find things in \
a<br> dialog with a clear layout and structure than in a dialog where people have<br>
been fighting for "visibility" of their personal pet peeve (and where as \
a<br> result all the items are "fighting" for visibility one over the \
other).<br> <br>
Additionally in terms of artwork I don't think that any of<br>
the "g/a-t-visibility"-proposals that I've seen so far has matched \
the<br> intended style for "Oxygen" as well as the original status did. I \
think that<br> all of them have looked inferior.<br>
<br>
Best wishes,<br>
<br>
Torsten<br>
<font color="#888888"><br>
--<br>
</font><div><div></div><div class="Wj3C7c"> Torsten Rahn<br>
<br>
Tel.: 0 21 61 - 46 43 - 192<br>
<br>
credativ GmbH, HRB Mnchengladbach 12080<br>
Hohenzollernstr. 133, 41061 Mnchengladbach<br>
Geschftsfhrung: Dr. Michael Meskes, Jrg Folz<br>
</div></div></blockquote></div><br>
["system-settings-using-tooltab.patch" (text/x-diff)]
Index: moduletabbar.cpp
===================================================================
--- moduletabbar.cpp (révision 789309)
+++ moduletabbar.cpp (copie de travail)
@@ -29,14 +29,10 @@
: KTabBar(parent)
{
-}
+ QFont modifiedFont = font();
+ modifiedFont.setPointSize( modifiedFont.pointSize() * 1.2 );
+ setFont(modifiedFont);
-QSize ModuleTabBar::tabSizeHint ( int index ) const {
- QSize tabSize = KTabBar::tabSizeHint(index);
-
- tabSize.setWidth( size().width() / count() -2);
-
- return tabSize;
}
#include "moduletabbar.moc"
Index: categories/settings-general.desktop
===================================================================
--- categories/settings-general.desktop (révision 789309)
+++ categories/settings-general.desktop (copie de travail)
@@ -4,8 +4,9 @@
X-KDE-Weight=100
X-KDE-System-Settings-Category=general
X-KDE-System-Settings-Parent-Category=
+Icon=preferences-system
-Name=General
+Name=General Settings
Name[ar]=عام
Name[be]=Агульныя
Name[bg]=Основно
Index: categories/settings-advanced.desktop
===================================================================
--- categories/settings-advanced.desktop (révision 789309)
+++ categories/settings-advanced.desktop (copie de travail)
@@ -4,8 +4,9 @@
X-KDE-Weight=200
X-KDE-System-Settings-Category=advanced
X-KDE-System-Settings-Parent-Category=
+Icon=applications-engineering
-Name=Advanced
+Name=Advanced Settings
Name[af]=Gevorderde
Name[ar]=متقدم
Name[be]=Асаблівы
Index: moduletabbar.h
===================================================================
--- moduletabbar.h (révision 789309)
+++ moduletabbar.h (copie de travail)
@@ -31,9 +31,6 @@
public:
ModuleTabBar (QWidget *parent=0);
-protected:
-
- virtual QSize tabSizeHint(int index) const;
};
#endif
Index: mainwindow.cpp
===================================================================
--- mainwindow.cpp (révision 789309)
+++ mainwindow.cpp (copie de travail)
@@ -65,11 +65,21 @@
// Load the menu structure in from disk.
readMenu( rootItem );
qStableSort( rootItem->children.begin(), rootItem->children.end(), pageLessThan \
); // sort tabs by weight
- moduleTabs = new ModuleTab(this);
+ moduleTabs = new QStackedWidget(this);
buildActions();
buildMainWidget();
// We hide the menubar. So ensure the toolbar is always visible because you \
cannot get it back setupGUI(Save|Create,QString());
+
+ unplugActionList("modules");
+ plugActionList("modules", menuActions->actions());
+
+ //Select first module view
+ if (menuActions->actions().isEmpty()==false) {
+ menuActions->actions().first()->setChecked(true);
+ changeModule(menuActions->actions().first());
+ }
+
menuBar()->hide();
connect(moduleTabs, SIGNAL(currentChanged(int)), SLOT(widgetChange()));
@@ -184,14 +194,23 @@
kcsfpm, SLOT(setFilterRegExp(const QString&)));
connect( kcsfpm, SIGNAL(layoutChanged()),
this, SLOT(updateSearchHits()) );
- moduleTabs->addTab(tv, item->service->name() );
+
+ moduleTabs->addWidget(tv);
+ QAction* menuAction = new QAction(this);
+ menuAction->setIcon(KIcon(item->service->icon()));
+ menuAction->setText(item->service->name());
+ menuAction->setCheckable(true);
+ menuActions->addAction(menuAction);
+ addAction(menuAction);
+
// record the index of the newly added tab so that we can later update the \
label showing // number of search hits
modelToTabHash.insert( kcsfpm, moduleTabs->count() - 1 );
}
+
windowStack->addWidget(moduleTabs);
windowStack->setCurrentWidget(moduleTabs);
setCentralWidget(windowStack);
@@ -208,6 +227,12 @@
showOverviewAction->setEnabled(false);
addAction(showOverviewAction);
+ menuActions = new QActionGroup( this );
+ //Could not use exclusive in action group to allow the user reclicks on a checked \
action + //to come back from a module to main page.
+ menuActions->setExclusive(false);
+ connect(menuActions, SIGNAL(triggered(QAction*)), this, \
SLOT(changeModule(QAction*))); +
QWidget *searchWid = new QWidget( this );
QLabel * searchIcon = new QLabel( searchWid );
searchIcon->setPixmap( BarIcon( "system-search" ) );
@@ -336,7 +361,15 @@
// visible
windowStack->setCurrentWidget( groupWidget );
- setCaption( mItem->service->name() );
+ QAction* checkedAction = NULL;
+ foreach(QAction* action, menuActions->actions()) {
+ if (action->isChecked()) {
+ checkedAction = action;
+ break;
+ }
+ }
+
+ setCaption( i18nc("Module - Module Place[General/Advanced]", "%1 - %2", \
mItem->service->name(), checkedAction->text()) ); \
showOverviewAction->setEnabled(true); searchText->setEnabled(false);
search->setEnabled(false);
@@ -387,6 +420,23 @@
}
}
+void MainWindow::changeModule(QAction* action)
+{
+ kDebug() << "Change module" << endl;
+ if (windowStack->currentWidget() != moduleTabs) {
+ showOverview();
+ }
+
+ moduleTabs->setCurrentIndex(menuActions->actions().indexOf(action));
+ setCaption( action->text() );
+
+ foreach(QAction* currentAction, menuActions->actions()) {
+ currentAction->setChecked(false);
+ }
+ action->setChecked(true);
+
+}
+
bool pageLessThan( MenuItem *page1, MenuItem *page2 )
{
return page1->item.weight() < page2->item.weight();
Index: moduletab.cpp
===================================================================
--- moduletab.cpp (révision 789309)
+++ moduletab.cpp (copie de travail)
@@ -21,7 +21,6 @@
#include "moduletab.h"
#include <QTabBar>
-#include <QFont>
#include <QStackedWidget>
#include <QVBoxLayout>
@@ -45,14 +44,8 @@
d->tabBar = new ModuleTabBar(this);
d->tabBar->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Minimum);
- d->tabBar->setShape(QTabBar::TriangularNorth);
mainLayout->addWidget(d->tabBar);
-
- QFont font = d->tabBar->font();
- font.setBold(true);
- font.setPointSize( font.pointSize() * 1.2 );
- d->tabBar->setFont(font);
-
+
d->stackedWidget = new QStackedWidget(this);
mainLayout->addWidget(d->stackedWidget);
@@ -77,9 +70,10 @@
return d->stackedWidget->currentWidget();
}
-void ModuleTab::addTab(QWidget* view, const QString& name)
+void ModuleTab::addTab(QWidget* view, const QIcon& icon, const QString& name)
{
- d->tabBar->addTab(name);
+ d->tabBar->addTab(icon, name);
+
d->stackedWidget->addWidget(view);
}
Index: mainwindow.h
===================================================================
--- mainwindow.h (révision 789309)
+++ mainwindow.h (copie de travail)
@@ -28,6 +28,7 @@
class QAbstractItemModel;
class QAction;
+class QActionGroup;
class QLabel;
class QModelIndex;
class QStackedWidget;
@@ -59,23 +60,25 @@
void updateSearchHits();
void showOverview();
void widgetChange();
-
+ void changeModule(QAction* action);
+
private:
void readMenu( MenuItem * );
KCModuleModel *model;
KService::List categories;
KService::List modules;
- MenuItem * rootItem;
+ MenuItem *rootItem;
QStackedWidget *windowStack;
- ModuleTab *moduleTabs;
- KLineEdit * search;
+ QStackedWidget *moduleTabs;
+ KLineEdit *search;
KCMultiWidget *groupWidget;
QHash<KService::Ptr,KCMultiWidget*> moduleItemToWidgetDict;
QHash<const QAbstractItemModel *,int> modelToTabHash;
+ QActionGroup* menuActions;
QAction *showOverviewAction;
KAction *searchText;
KAction *searchClear;
Index: moduletab.h
===================================================================
--- moduletab.h (révision 789309)
+++ moduletab.h (copie de travail)
@@ -22,6 +22,7 @@
#include <QList>
#include <QString>
+#include <QIcon>
#include <ktabwidget.h>
#include <ktabbar.h>
@@ -39,7 +40,7 @@
QWidget* currentWidget() const;
- void addTab(QWidget* view, const QString& name);
+ void addTab(QWidget* view, const QIcon& icon, const QString& name);
signals:
Index: systemsettingsui.rc
===================================================================
--- systemsettingsui.rc (révision 789309)
+++ systemsettingsui.rc (copie de travail)
@@ -3,6 +3,7 @@
<ToolBar name="mainToolBar" iconText="icontextright">
<Action name="showAll"/>
+ <ActionList name="modules" />
<Separator/>
<Action name="spacer"/>
<Action name="searchText"/>
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic