В миру бытует мнение: “Идеальный интерфейс это не тот в который нечего добавить, а тот из которого нечего убрать”. Верность этого выражения, зависит от глубины в него смотрящего. Просто запомните, что крайность это всегда плохо.

Суть в том, что минимализировать интерфейс до состояния из которого уже нечего убрать нельзя, так как это чревато ухудшением функционала приложения. С другой же стороны пичкать интерфейс 1000 и 1-й кнопкой тоже нельзя, мы ведь не хотим довести пользователя до эпилептического припадка. И это приводит к тому, что мы вынуждены или что то убрать или оставить. Все коварство ситуации в том, что оба выбора не верны) Как говаривали мудрецы – “Ограничения существуют лишь в нашем сознании”, проще говоря есть третий путь. Так что же делать, как построить нереально крутой и в тоже время простой интерфейс?

Главное это помнить золотое сечение интерфейса: Интерфейс которому нужен мануал – плохой интерфейс. Человек должен понимать все изначально сам, это залог успеха. Все бы неплохо, но если приложение во истину огромно то это становится утопией. Ответ прост – обучайте своих пользователей поэтапно. Так работает Гугл и как мы знаем не безуспешно. Обновляйте интерфейс маленькими кусочками, смотрите на реакцию, делайте выводы. Читал где то как в Германии кладут дорожки в парках, стрители сначала ждут пока люди сами протопчут себе пути, а потом на основе их уже кладут дорожки. Давайте пользователям возможность самим решать, что им надо, а что нет.

Тут мы подходим к следующему этапу – многоуровневый интерфейс. Идея в том, что бы ограничить нового пользователя минимальным интерфейсом, и увеличивать его функционал по мере необходимости этого функционала пользователю. К примеру возьмем Таск-менеджер. Домохозяйкам вполне хватит описания таска даты и времени, программисту же будет нужен куда больший функционал. И если дать домохозяйке функционал программиста, она растеряется и не будет пользоваться программой. А потому смысл такой – Каждому по потребностям.

Есть правда одно, но. Есть системы допустим бухгалтерия, где изначально нужно крайне много всего. В таких случаях нужно мыслить нестандартно и путь этот для истинных джедаев разработки интерфейсов. Тут необходим анализ ситуации изучение других систем желательно с технологией eye-tacking. Все это даст вам направление куда можно двигаться, а как именно решать уже вам.

И помните – ограничения лишь в нашем сознании.

Довольно удобно. По крайней мере искать стили нужных блоков стало куда легче.

Вот приблезительно как это выглядит:

/* Layouts (Placed within template order and incapsulation)
****************************************************************/
body {
height:100%;
line-height: 1;
color:#383838;
text-align:left;
background: url(img/bg.png) repeat;
}
	#container {
	background: url(img/bgTop2.png) repeat-x;
	height:100%;
	}
		#page {
		height:100%;
		margin: 0 auto;
		width:970px;
		}
			#head {
			height:140px;
			margin: 0 9px;
			background: transparent url(img/endoscope.jpg) no-repeat top left;
			}
				#top-menu {
				height:55px;
				text-align:right;
				padding-right:25px;
				}
				/*top-menu content**********************************/
						#top-menu a {
						text-decoration:none;
						font-family:Verdana, Arial;
						font-size:12px;
						color:#fff;
						overflow:hidden;
						cursor:pointer;
						display:block;
						}
						#top-menu div{
						width:116px;
						height:22px;
						background: transparent url(img/topBut.png) no-repeat 0px -25px;
						text-align:center;
						padding-top:7px;
						margin-right:5px;
						float:right;
						cursor:default;
						}
						#top-menu div:hover, #top-menu div.active {
						width:116px;
						height:22px;
						background: transparent url(img/topButActive.png) no-repeat 0px 0px;
						text-align:center;
						padding-top:32px;
						margin-right:5px;
						float:right;
						cursor:default;
						}
				/***********************************/
				#logo {
				margin-top:40px;
				width:600px;
				float:left;
				height:26px;
				overflow:hidden;
				}
				/*logo content**********************************/
						#logo a {
						text-decoration:none;
						}
						#logo img {
						border:0px;
						}
						#logo h1 {
						text-indent:-9999px;
						}
				/***********************************/
				#searchTop {
				margin-top:40px;
				margin-right:6px;
				float:right;
				width:300px;
				}
				/*searchTop content**********************************/
						#searchTop .field {
						float:left;
						background: url(img/searchField.jpg) no-repeat;
						}
						#searchTop input.hiddenField{
						background-color: transparent;
						border: solid 0px #FFF;
						padding:3px 5px 0 5px;
						height:23px;
						width:210px;
						color:#fff;
						}
						#searchTop input.hiddenField:focus{
						border: solid 0px #FFF;
						}
						#searchTop .button {
						float:right;
						}
				/***********************************/
			#shadow {
			background: transparent url(img/sh.png) repeat-y top left;
			height:100%;
			}
				#body {
				margin: 0 9px;
				background: #fff;
				padding:6px;
				float:left;
				height:100%;
				}
					#topBar  {
					width:940px;
					height:29px;
					background: transparent url(img/topBar.png) no-repeat top left;
					}
						/*topBar content**********************************/
								#topBarActions {
								float:right;
								color:#fff;
								margin: 10px 15px 0px 0px;
								font-size:10px;
								font-family:Verdana, Arial;
								}
								#topBarActions a{
								color:#ffffff;
								text-decoration:none;
								}
								#topBarActions a:hover{
								color:#ffffff;
								border-bottom:#fff 1px solid;
								}
								#topBarLocation {
								float:left;
								color:#fff;
								margin: 8px 0px 0px 35px;
								font-size:12px;
								font-family:Verdana, Arial;
								cursor:default;
								}
						/***********************************/
					#wrap {
					width:100%;
					height:100%;
					/*float:left;*/
					}
					#menuLeft {
					margin-top: 6px;
					width:246px;
					clear:none;
					float:left;
					height:100%;
					}
					#content {
					margin: 6px 0px 0px 6px;
					clear:none;
					float:left;
					width:688px;
					height:100%;
					background:#ccc;
					}
					#articleBg {
					background:transparent url(img/articleBodyBg.png) repeat-y;
					height:100%;
					}
						#articleTop{
						background:transparent url(img/articleTopBg.png) no-repeat;
						height:100%;
						}
							#articleTop #article{
							font-family:Times New Roman;
							font-size:16px;
							padding:30px 40px 30px 50px;
							text-align:justify;
							line-height:18px;
							/*height:600px;
							display:list-item;*/
							width:588px;
							height:100%;
							}

					#articleOnlyTop {
					background:transparent url(img/articleOnlyTopBg.png) no-repeat;
					height:100%;
					width:940px;
					}
						#articleOnlyTop #article{
						font-family:Times New Roman;
						font-size:16px;
						padding:30px 50px 30px 50px;
						text-align:justify;
						line-height:18px;
						width:840px;
						height:100%;
						}

Вообщем смотрим шо получилось

Стоит отметить, что как бы мне того не хотелось дизайнер с меня не очень.. Но тем не менее вышло вроде миленько.

Главная страница:

Страница контента: