Нужна помощь в веб-интерфейсе - отображение 7 вариантов, ДЕЙСТВИТЕЛЬНО длинных, где каждый параметр имеет много контента

Question

Я не великий дизайнер пользовательского интерфейса, поэтому я подумал, что я дам это тем, кто лучше разрабатывает интерфейсы, которые можно использовать и которые могут хорошо выглядеть.

У меня есть общедоступная страница на сайте, на которой много копий (как при копирайтинге). Раздел состоит из 7 больших разделов. В каждом разделе много абзацев и, возможно, несколько изображений.

Теперь заголовок раздела немного необычен в том смысле, что он довольно длинный - на самом деле это полный вопрос, задаваемый пользователю. Я предполагаю, что идея состоит в том, что, когда они просматривают вопросы, они прочитают параграфы ниже, если это относится к ним.

Если я просто размещу все разделы на одной странице, страница окажется очень длинной. Я не думаю, что пользователи будут переходить к вопросу 5-7.

Я не вижу, как я могу поместить эти "вопросы" в обычное меню "левой боковой панели", потому что это просто займет слишком много места вертикально по экрану.

Есть ли у кого-нибудь предложения о том, как создать такую ​​страницу, чтобы она сводила к минимуму или полностью исключала прокрутку, позволяла пользователю отсканировать 7 вопросов, позволяла пользователю легко читать весь текст и т. Д.?

Я могу использовать JavaScript, если мне нужно. Я просто не очень креативен, когда дело доходит до пользовательского интерфейса, поэтому я не знаю, что делать . Это не вопрос как - это скорее проблема творчества. Я программист на стороне сервера LOL.

Если вы действительно можете предоставить несколько примеров онлайн успешных / прибыльных сайтов, которые демонстрируют ваше решение, это было бы бонусом;)

Спасибо!

Answer 1

Я предполагаю, что попросить маркетологов переделать контент не вариант (см. http://www.nngroup.com/topic/writing-web/ для подсказок по написанию для Интернета). : - /

Вы можете рассмотреть дизайн, который опирается на традиционное оглавление. Если вы можете, измените текст так, чтобы наиболее значимые и уникальные слова были в левой части каждого вопроса (то есть не повторяйте избыточную информацию). Если это поможет, вы можете полужирный один или два ключевых термина из каждого элемента, чтобы облегчить сканирование (Google делает это в результатах поиска по этой причине).

Цель состоит в том, чтобы обобщить и упростить правильный выбор, а затем позволить пользователю перейти к деталям - вы можете использовать ссылки на странице, если хотите. Даже если страница длинная, это не убьет людей; пользователи знают, как прокручивать (если они знают, что там внизу есть что прокрутить). Например:

Ситуация, которая больше всего относится ко мне ...

1. Я не женат , детей нет, и я не забочусь о том, кто болен.
2. Я женат, и мы не заботимся о детях или больных взрослых.
3. Я женат, и у нас есть дети , но мы не заботимся о каких-либо взрослых.
4. За последние 2 года я был овдовевшим и у меня есть дети, о которых я забочусь.
5. Я овдовел более 2 лет назад, я не женился повторно, и у меня есть дети, о которых я забочусь.
6. Я разведен и оплачиваю алименты.

Я не женат , детей нет, и я не забочусь о том, кто болен.

Lorem ipsum ...

Я женат, и мы не заботимся о детях или больных взрослых.

Lorem ipsum ...

<h1>The situation that applies most to me is...</h1>
<ol>
<li><a href="#x">I am <b>unmarried</b>, no kids, and I'm not taking care of of someone who's sick.</a></li>
<li><a href="#y">I am married, and we aren't taking care of kids or sick adults.</a></li>
<li><a href="#z">I'm married and we <b>have kids</b>, but aren't taking care of any adults.</a></li>
<li><a href="#a">I've been <b>widowed in the past 2 years</b> and I have kids that I take care of.</a></li>
<li><a href="#b">I was widowed <b>more than 2 years</b> ago, I haven't remarried, and I have kids that I take care of.</a></li>
<li><a href="#c">I'm <b>divorced</b> and pay child support.</a></li>
</ol>

<a name="x"></a>
<h2>I am <b>unmarried</b>, no kids, and I'm not taking care of of someone who's sick.</h2>
<p>Lorem ipsum...</p>


<a name="y"></a>
<h2>I am married, and we aren't taking care of kids or sick adults.</h2>
<p>Lorem ipsum...</p>

Answer 2

Я предлагаю вырезать вопросы с определенным количеством символов и добавить «...» в конце. Если пользователь наводит курсор на текст, разверните вопрос. См. http://api.jquery.com/hover/ для начала.

Answer 3

посмотрите по следующим ссылкам

1. http://www.microsoft.com/visualstudio/en-us/products/2010-editions/ultimate
2. http://office.microsoft.com/en-us/excel-help/create-or-delete-a-pivottable-or-pivotchart-report-HP010089893.aspx
3. http://support.microsoft.com/kb/2267642

сначаластраница: содержит ссылки слева, нажмите на ссылку, чтобы отобразить содержимое справа.
вторая страница: содержит ссылку вверху, нажмите на ссылку, чтобы перейти к содержимому, в конце содержимого есть ссылка на верхнюю третью страницу:во-вторых, но содержимое может быть разборным.

Также вы можете использовать аккордовый элемент управления (http://docs.jquery.com/UI/Accordion).
для всего вышеупомянутого решения вы можете использовать norma javascript или JQuery.

Answer 4

Вы можете дать каждому вопросу заголовок (краткая версия исходного вопроса) и свернуть длинную версию.С символом «+» перед или «читать полный вопрос» под заголовком вы указываете, что есть больше текста.