WebWork Magazin - Webseiten erstellen lassen, Online Medien, html

Webhoster, Webhosting Provider und Domain registrieren

Home | Registrieren | Einloggen | Suchen | Aktuelles | GSL-Webservice | Suleitec Webhosting
Reparatur-Forum | Elektro forum | Ersatzteilshop Haushalt und Elektronik



Im Homepage und Webhosting-Forum --- Was braucht eine gute/benutzerfreundliche Website?

3D, Bildbearbeitung, Farbgebung, Publishing, Typographie, Grafiker, Designer, Templates, Kostenlose und günstige Templates, Design-Cuts, Outsourcing, Erstellen von Webseiten, Visitenkarte bis Printvorlage

Forum » Layout - Webwork bis Print für Webseiten » Was braucht eine gute/benutzerfr... - 24 Mai 2018 Antworten
Was braucht eine gute/benutzerfreundliche Website?
kat
Otto-Normal-Poster
Threadstarter




Beiträge: 71

Hi,

ich bin gerade dabei eine neue Version meiner page zu erstellen und mich würde mal interessieren, wann ihr eine Homepage als Benutzerfreundlich und übersichtlich hält.

Auch Meinungen zu verschiedenen Menükonstruktionen und zusatzlinks wie "Nach oben" haltet und ob ihr zusätzliche sachen auch benutzt.


Also meine page soll extrem einfach gestaltet sein, eben "Usability Pur".

Danke im Voraus für alle Antworten, egal ob von Profi oder Anfänger.


Kai


  Profil   E-Mail   Website   Editieren   Zitieren
michael
Foren-Team




Beiträge: 1933

maximal zwei navigationen, welche statisch (aufklappen, etc. dürfen sie), sich aber nicht ständig gravierend verändern.

"nach oben" finde ich recht unübersichtlich. man sollte aber immer wissen wo man gerade ist.

da gibt es sicherlich viele punkte - zeig doch mal den aktuellen stand - dann ist es einfacher!


  Profil   Editieren   Zitieren
[SpecFor]crusher
Otto-Normal-Poster




Beiträge: 97

keine wechselnden desgins, genaue linkbeschriftungen, evtl. ein js-mouseover-beschreibungskästchen (kein plan wie ichs beschreiben soll) neben das menü.
eiheitliche farben....

  Profil   E-Mail   Website   Editieren   Zitieren
c3o
Posting-Schinder




Beiträge: 585

Puh, zu dem Thema wurden ganze Bücher geschrieben.
Aber mal spontan:

* Schriftgröße userverstellbar lassen (also nicht im CSS in px angeben wie hier im Forum) und nicht kleiner als 10pt für Lauftext
* Keine Popups, chromeless Windows, Statuszeilenscripts, Laufschriften usw
* Browser- und Auflösungskompatiblität
* Sitemap, Suche (je nach Größe)
* Externe vs interne Links kennzeichnen (wos nicht eindeutig ist, kommt auf den Seiteninhalt an)
* ordentlichen den man in Bookmarks wiederfindet (nicht "::willkommen")<br /> * intuitive Linkfarben für besuchte Links, auf keinen Fall die gleiche Farbe wie normal<br /> * Kontaktformular statt E-Mail-Link<br /> * TITLE-Attribute für mehr Infos zB zu Links und Bildern, ACRONYM für Erklärung von Abkürzungen, STRONG und EM für Betonung.. überhaupt sauberes XHTML+CSS<br /> * LABEL für Checkboxes und Radiobuttons in Formularen<br /> * keine Frames<br /> * Zusammenfassungen von längeren Artikeln (falls es sowas gibt)<br /> * Breadcrumbs-Navi (Home > Kategorie1 > Kategorie2 > Artikel)<br /> * gute Fehlermeldungen bei interaktiven Sachen oder 404s (Was ist passiert, wieso, was kann ich jetzt machen)<br /> usw...<br /> <br /> Natürlich is nicht alles für jede Seite benötigt/geeignet.</div><br></td></tr><tr bgcolor="#638CB1"><td>  <a rel="nofollow" href="/profil.php?user=87" class="subpost">Profil</a>   <a href="mailto:%34%77%65%62%73%69%74%65%73%40%63%33%6f%2e%6f%72%67" class="subpost">E-Mail</a>   <a href="http://c3o.org" TARGET="_blank" class="subpost">Website</a>   <a rel="nofollow" href="/posting_editieren.php?post_id=9594&thema=1127&forum=27" class="subpost">Editieren</a>   <a rel="nofollow" href="/antworten.php?topic=1127&forum=27&post=9594"e=1" class="subpost">Zitieren</a> </td></tr><tr bgcolor="#BDCEDD"> <td width="20%" rowspan="2" valign="top" > <b>kat</b><br><div class="small">Otto-Normal-Poster<br>Threadstarter<br></div><br><br><br><br><div class="small">Beiträge: 71</div></td><td valign="top" width="80%"><div align="right" class="small"><a name="9600">   </a></div><br><div class="posting"> Also...danke erstmal für die schnellen Antworten. Ich hab leider noch nichts wirklich umgesetzt, eben "nur" geplant und Skitzen gemacht, wollte eben von Vornherein wissen worauf ich achten sollte (naja ein bisschen ahnung hab ich da selber auch, bin zwar 14 aber hab schon fast 2 Jahre erfahrung im Internet gesammelt)<br /> <br /> Und es soll - auch wenn ich mich damit hier vielleicht unbeliebt mache - ein Online Magazin werden, wahrscheinlich nicht so erfolgreich wie 4websites, aber mal sehen...<br /> <br /> <br /> So, mal die Checkliste durchgehen:<br /> <br /> * Schriftgröße userverstellbar lassen (also nicht im CSS in px angeben wie hier im Forum) und nicht kleiner als 10pt für Lauftext <br /> - Momentan ist die planung 9pt und Verdana, ich denk mal das ist ok, aber mal sehen wies auf 10pt wirkt<br /> <br /> * Keine Popups, chromeless Windows, Statuszeilenscripts, Laufschriften usw <br /> - Bin ich auch gegen solche sachen, und ich versuche so weit wie nur Möglch mich von Javascript fernzuhalten<br /> <br /> * Browser- und Auflösungskompatiblität <br /> - Browser, naja wahrscheinlich werde ich Layer einsetzen, gut anschaubar wirds mindestens mit 800*600, mal sehen vielleicht auch weniger<br /> <br /> * Sitemap, Suche (je nach Größe) <br /> - Suche ist schon eingeplant, auch wenn ich noch nicht 100pro weiß wie ich das umsetze, aber dann meld ich mich nochmal *lol* Sitemap ist denk ich mal etwas schwer zu gestalten, aufgrund des (hoffentlich) mit der Zeit viel wachsenden Content, aber ich werd mal sehen...<br /> <br /> * Externe vs interne Links kennzeichnen (wos nicht eindeutig ist, kommt auf den Seiteninhalt an) <br /> Hmm...ich wüsste nicht wie, und Grafiken vor den links find ich nicht sonderlich gut, aber ich denke mal durch die einfache Gliederung wird mans schon erkennen können<br /> <br /> * ordentlichen <title> den man in Bookmarks wiederfindet (nicht "::willkommen")<br /> - Eigenbau CMS, im Titel wird Artikelname vorhanden sein<br /> <br /> * intuitive Linkfarben für besuchte Links, auf keinen Fall die gleiche Farbe wie normal <br /> - Wahrscheinlich einen etwas dunkleren Ton als unbesuchte<br /> <br /> * Kontaktformular statt E-Mail-Link <br /> - Is klar<br /> * TITLE-Attribute für mehr Infos zB zu Links und Bildern, ACRONYM für Erklärung von Abkürzungen, STRONG und EM für Betonung.. überhaupt sauberes XHTML+CSS <br /> - Aalso, Title mach ich, aber was ist ACRONYM? Und statt STRONG nehm ich B...mit css beschäftige ich mich schon recht lange, sollte "sauber" sein, aber XHTML hab ich bisher noch wenig ahnung, wollte erstmal HTML einsetzen, später dann XML oder wenn sich XHTML durchsetzt auch das<br /> <br /> * LABEL für Checkboxes und Radiobuttons in Formularen <br /> - Öhm, was für ne Label???<br /> <br /> * keine Frames <br /> - Bin ich auch ein Gegner von<br /> <br /> * Zusammenfassungen von längeren Artikeln (falls es sowas gibt) <br /> - Klar, eben typisch abgegeckt @ drweb *lol*<br /> <br /> * Breadcrumbs-Navi (Home > Kategorie1 > Kategorie2 > Artikel) <br /> - Joooa...<br /> <br /> * gute Fehlermeldungen bei interaktiven Sachen oder 404s (Was ist passiert, wieso, was kann ich jetzt machen) <br /> - Werd ich machen<br /> <br /> <br /> Hat jemand noch mehr Tipps? Was findet ihr an drweb.de , devmag.net , exine.de , 4websites , nachwuchspages.de besonders gut, oder was ist verbesserungswürdig? (heißt nicht das ich faken will, aber abgucken tut jeder mal etwas...)<br /> <br /> Danke nochmal für die bisherigen und zukünftigen Antworten!<br /> <br /> <br /> Kai</div><br></td></tr><tr bgcolor="#BDCEDD"><td>  <a rel="nofollow" href="/profil.php?user=424" class="subpost">Profil</a>   <a href="mailto:%6b%61%69%40%6a%65%78%2d%74%72%65%6d%65%2e%64%65" class="subpost">E-Mail</a>   <a href="http://www.jex-treme.de" TARGET="_blank" class="subpost">Website</a>   <a rel="nofollow" href="/posting_editieren.php?post_id=9600&thema=1127&forum=27" class="subpost">Editieren</a>   <a rel="nofollow" href="/antworten.php?topic=1127&forum=27&post=9600"e=1" class="subpost">Zitieren</a> </td></tr><tr bgcolor="#638CB1"> <td width="20%" rowspan="2" valign="top" > <b>c3o</b><br><div class="small">Posting-Schinder</div><br><br><br><br><div class="small">Beiträge: 585</div></td><td valign="top" width="80%"><div align="right" class="small"><a name="9754">   </a></div><br><div class="posting"> <strong> ist besser als <b> und <em> besser als <i>, weil das bedeutungsbezogenes Markup ist, also Wichtigkeit beschreibt, nicht Layout. Dadurch kann z.B. ein Sprachbrowser für Sehbehinderte diese Wörter speziell betonen, eine Suchmaschine sieht, dass er wichtig ist, usw. Das ist einer der Grundsätze von XHTML: du sollst im Code nicht das Aussehen, sondern den Inhalt beschreiben, und das Layout mit einem je nach Medium austauschbaren Stylesheet beschreiben.<br /> <br /> <acronym title="HyperText Markup Language">HTML</acronym><br /> führt in Mozilla zu gestrichelter Unterstreichung und Tooltip mit der Erklärung (IE unterstreichts nicht).<br /> <br /> <label for="eingabe"><input id="eingabe" type="checkbox" />Ja ich kreuze diese Checkbox an</label><br /> damit kann man die Checkbox auch durch Klick auf den Text, also das Label, aktivieren, wie man es aus Windows-Programmen gewohnt ist. Es ist schade, dass das im Web so wenig bekannt und verbreitet ist :(<br /> Ausserdem kann label verwendet werden, um Formularelemente mit einem Rahmen zu gruppieren, wie ebenfalls aus Win-Applikationen bekannt.<br /> <br /> XHTML klingt furchteinflössend, ist es aber nicht. Im Grunde ists eine strengere HTML4-Spezifikation, die HTML an die XML-Standards angleicht. Die Hauptänderungen sind eigentlich nur, dass alle Tags geschlossen werden, dass ein DOCTYPE verpflichtend ist, alles klein geschrieben wird, Tags richtig verschachtelt werden, Attribute Werte haben, und diese immer in Anführungszeichen sind (statt <input type=checkbox checked> in XHTML <input type="checkbox" checked="checked" />) -- und eben dass man Inhalt und Design stärker trennt, aber das ist eigentlich nur im Strict-Modus zwingend (alles per CSS, zb kein border-Attribut mehr, keine font-Tags, usw).</div><br></td></tr><tr bgcolor="#638CB1"><td>  <a rel="nofollow" href="/profil.php?user=87" class="subpost">Profil</a>   <a href="mailto:%34%77%65%62%73%69%74%65%73%40%63%33%6f%2e%6f%72%67" class="subpost">E-Mail</a>   <a href="http://c3o.org" TARGET="_blank" class="subpost">Website</a>   <a rel="nofollow" href="/posting_editieren.php?post_id=9754&thema=1127&forum=27" class="subpost">Editieren</a>   <a rel="nofollow" href="/antworten.php?topic=1127&forum=27&post=9754"e=1" class="subpost">Zitieren</a> </td></tr><tr bgcolor="#BDCEDD"> <td width="20%" rowspan="2" valign="top" > <b>jeanny</b><br><div class="small">Pixelschubser</div><br><br><br><br><div class="small">Beiträge: 1</div></td><td valign="top" width="80%"><div align="right" class="small"><a name="53509">   </a></div><br><div class="posting"> wie wärs mit barrierefreiheit?</div><br></td></tr><tr bgcolor="#BDCEDD"><td>  <a rel="nofollow" href="/profil.php?user=4874" class="subpost">Profil</a>   <a href="mailto:%6c%75%64%77%69%67%40%70%65%72%67%61%6d%6f%6e%2d%69%6e%74%65%72%61%63%74%69%76%65%2e%64%65" class="subpost">E-Mail</a>   <a rel="nofollow" href="/posting_editieren.php?post_id=53509&thema=1127&forum=27" class="subpost">Editieren</a>   <a rel="nofollow" href="/antworten.php?topic=1127&forum=27&post=53509"e=1" class="subpost">Zitieren</a> </td></tr><tr bgcolor="#638CB1"> <td width="20%" rowspan="2" valign="top" > <b>progrookie</b><br><div class="small">Fachidiot</div><br><br><br><br><div class="small">Beiträge: 128</div></td><td valign="top" width="80%"><div align="right" class="small"><a name="53511">   </a></div><br><div class="posting"> Barrierefreiheit bin ich persönlich auch, nur sollte man den Aufwand, der dadurch entsteht genau überlegen. Meine Premisse ist eher dahingehend, dass W3C-Konform desigtn und/oder programmiert wird. <br /> <br /> Die "Gefahr", die die Barrierefreiheit mit sich bringt, ist die Tatsache, dass das entwickelte CSS nicht zu 100% durch den Validator kommt...<br /> <br /> --- <br /> <img src="http://www.progrookie.de/stuff/signatur.gif" border="0"></div><br></td></tr><tr bgcolor="#638CB1"><td>  <a rel="nofollow" href="/profil.php?user=1517" class="subpost">Profil</a>   <a href="mailto:%77%65%62%6d%61%73%74%65%72%40%70%72%6f%67%72%6f%6f%6b%69%65%2e%64%65" class="subpost">E-Mail</a>   <a href="http://www.progrookie.de" TARGET="_blank" class="subpost">Website</a>   <a rel="nofollow" href="/posting_editieren.php?post_id=53511&thema=1127&forum=27" class="subpost">Editieren</a>   <a rel="nofollow" href="/antworten.php?topic=1127&forum=27&post=53511"e=1" class="subpost">Zitieren</a> </td></tr> </table></td></tr></table> <table align="center" border="0" width="860" ><tr><td align="left" valign="top">   <br><br></td><td align="right" valign="top"> <a rel="nofollow" href="/antworten.php?topic=1127&forum=27" class="new"><b>Antworten</b></a></td></tr><tr><td align="center" valign="top"></td><td align="right" width="30%" valign="top"> <form action="forum.php" method="get"> <select name="forum" class="select" onChange="MM_jumpMenu('parent',this,0)"><option VALUE="#">Wähle ein Forum</option> <option VALUE="#"> </option> <option VALUE="#">Allgemeines</option> <option VALUE="#">----------------</option> <option VALUE="forum21_0.html">Webhoster Suleitec.de - Domain, Support und Registrierung</option> <option VALUE="forum38_0.html">Suleitec.de Kundeninfo</option> <option VALUE="forum42_0.html">Feedbook</option> <option VALUE="forum54_0.html">Webwork-Magazin und Homepage-Forum - Allgemeines </option> <option VALUE="#"> </option> <option VALUE="#">Webtechniken</option> <option VALUE="#">----------------</option> <option VALUE="forum23_0.html">PHP & MySQL</option> <option VALUE="forum24_0.html">HTML, CSS - Hilfe für das Erstellen einer Homepage</option> <option VALUE="forum46_0.html">Server-Administration und Verwaltung</option> <option VALUE="forum47_0.html">Sonstige Web-Programmiersprachen</option> <option VALUE="#"> </option> <option VALUE="#">Webwork</option> <option VALUE="#">----------------</option> <option VALUE="forum27_0.html">Layout - Webwork bis Print für Webseiten</option> <option VALUE="forum28_0.html">Software zum Erstellen einer Webseite und andere Programme</option> <option VALUE="forum29_0.html">Eure Webseite im Webmaster Forum</option> <option VALUE="forum33_0.html">Recht im Internet - keine Rechtsberatung zur Homepage !</option> <option VALUE="forum40_0.html">Internet Online Speicherdienste</option> <option VALUE="forum57_0.html">Websiten erstellen und Website Pflege - Hilfe für Anfänger</option> <option VALUE="#"> </option> <option VALUE="#">Netzwelt</option> <option VALUE="#">----------------</option> <option VALUE="forum30_0.html">Netztheke</option> <option VALUE="forum31_0.html">Internet & Co</option> <option VALUE="forum48_0.html">Computer & Co - Hardware und Software</option> <option VALUE="forum50_0.html">Entertainment</option> <option VALUE="forum56_0.html">Webworkmagazin - News und Artikel</option> <option VALUE="#"> </option> <option VALUE="#">inTEAM</option> <option VALUE="#">----------------</option> </select> </form></td></tr></table> <!-- ENDE UMRANDUNG --> </td><td width="20"><img src="/images/spacer.gif" width="20" height="1"> </td></tr> <tr><td COLSPAN=6><table border="0" cellpadding="2" cellspacing="0" align="center" valign="top" width="860" > <tr><td align="left valign="bottom"><a href="/">Forum</a> <b>»</b> <a href="/forum27_0.html">Layout - Webwork bis Print für Webseiten</a> <b>»</b> <a href="posting1127_27_0.html">Was braucht eine gute/benutzerfr...</td> </tr></td></table> <table width="860" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td><br> <table width="100%" border="0" cellspacing="1" cellpadding="5" bgcolor="#000000"> <tr bgcolor="#638CB1"><td> Aktuelle Beiträge zur Hilfe im Forum für Homepage - Was braucht eine gute/benutzerfreundliche Website? im Forum Homepage Hosting </td><td align="center">Antworten</td><td align="center">Letztes Posting</td></tr> <tr bgcolor="#BDCEDD"><td><a href="../posting10872_27_0.html#">Software / Progg fürs Webdesign...</a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">1 </td><td align="center"> 18.05.2018 12:00 von minad</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting14922_27_0.html#">Photoshop - Transparente dunkle Fläche</a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">1 </td><td align="center"> 07.03.2018 10:36 von Ruzzla</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting14564_27_0.html#">Ebay Shop Design </a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">1 </td><td align="center"> 27.11.2017 13:49 von Allon</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting14563_27_0.html#">Ebay Shop Design </a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">0 </td><td align="center"> 07.08.2017 11:38 von yincom</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting10570_27_0.html#">Suche Designer/Skripter? für meine Homepage.</a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">5 </td><td align="center"> 26.05.2017 11:41 von fischermax676</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting14263_27_0.html#">Online Shop </a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">2 </td><td align="center"> 02.05.2017 19:14 von minze</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting11453_27_0.html#">Design ändern.</a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">2 </td><td align="center"> 10.02.2017 13:49 von kristofermuelle</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting12900_27_0.html#">Suche Webdesign Agentur - Muss kein Design Awards Gewinner sein</a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">5 </td><td align="center"> 29.01.2017 13:37 von minze</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting13191_27_0.html#">[Suche] Webdesigner / Grafiker für Headergrafik inkl. Logo</a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">1 </td><td align="center"> 16.06.2015 08:49 von Zeus</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting11632_27_0.html#">Fremde Bilder auf eigener Homepage</a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">7 </td><td align="center"> 07.04.2015 14:25 von Yvonne</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting4790_27_15.html#">gutes 3d programm?</a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">16 </td><td align="center"> 24.03.2015 13:33 von Carlsson</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting12685_27_0.html#">Corporate Identity gestalten</a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">8 </td><td align="center"> 03.03.2015 14:44 von baschtl</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting13018_27_0.html#">Briefbögen heute noch zeitgemäß </a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">0 </td><td align="center"> 03.02.2015 18:10 von Webinator</tr> <tr bgcolor="#BDCEDD"><td><a href="../posting12963_27_0.html#">Thekenaufsteller mit eigenem Design</a> <br><div class="small">in "Layout - Webwork bis Print für Webseiten" </div></td><td align="center">3 </td><td align="center"> 13.10.2014 08:20 von Mensing</tr> </table></td></tr></table><br> <table width="860" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td><br> <table width="100%" border="0" cellspacing="1" bgcolor="#000000"> <tr bgcolor="#638CB1"><td colspan="3"><br> Besucher : 5601577    Heute : 517     Gestern : 1663     Online : 50     24.5.2018    8:08      1 Besucher in den letzten 60 Sekunden         <br>alle 60.00 Sekunden ein neuer Besucher<br></td></tr> </table> <table width="900" border="0" cellspacing="0" height="22" cellpadding="0" align="center" background="/images/lbg.jpg"> <tr> <td height="1" colspan="2"><img src="/images/weisserpixel.gif" width="900" height="1"></td> </tr> <tr> <td width="900"><div class="unten">   <a href="profil.php?show=nb">Nutzungsbedingungen</a> | <a href="http://www.webwork-community.net/impressum.html" target="_blanc" rel="no follow">Impressum</a> | <a href="http://www.webwork-community.net/datenschutz.html" target="_blanc" rel="no follow">Datenschutz</a> | <a href="rss/rss.xml" class="unten" target="_blank">RSS</a> </div> </td> <td width="90" align="right"><a href="#top" class="unten"> <div class="unten"> Nach oben</a>     </div> </td> </tr> <tr> <td height="1" colspan="2"><img src="/images/weisserpixel.gif" width="900" height="1"></td> </tr> </table> <br> </BODY> </HTML>