{"id":652,"date":"2010-07-05T17:22:13","date_gmt":"2010-07-05T15:22:13","guid":{"rendered":"http:\/\/robert.kolatzek.org\/wblog\/?p=652"},"modified":"2010-07-05T17:22:13","modified_gmt":"2010-07-05T15:22:13","slug":"wildscreen-usability","status":"publish","type":"post","link":"https:\/\/blog.kolatzek.org\/wblog\/652\/wildscreen-usability","title":{"rendered":"wildscreen* usability"},"content":{"rendered":"

Es ist bereits seit Monaten kein Geheimnis: das Seitenverh\u00e4ltnis der Monitore von 16:9 setzt sich durch<\/a>! Sie stellen zwar noch nicht die Mehrheit aber sie werden immer mehr<\/a>: die sog. Widescreen-Bildschirme. Wollte ich nur \u00fcber diese schreiben, hie\u00dfe auch der Titel „widescreen usability“. Das Problemfeld ist jedoch deutlich gr\u00f6\u00dfer. Neben den immer g\u00f6\u00dfer werdenden Bildschirmen gibt es die kleinen und kleinsten Bildschirme in Netbooks und Smartphones. Auch diese m\u00f6chten gut lesbar und problemlos bedienbar sein…<\/p>\n

Das Problem ist mir auf einer Internetseite, die ich beruflich oft aufrufe, aufgefallen: Sie wird mit jedem Update\u00a0 immer mehr in die L\u00e4nge gestreckt. Es ist kein Grund zur Panik, aber auch zum Jubel. Das zentrierte und auf das Minimum (aus den Richtlinien von 2007) vom 800 Pixeln an Breite entwickelte Design wirkt in einer Aufl\u00f6sung von 1920×1080 Pixeln ein wenig seltsam. Mag sein, dass man sich auch an solche Schmal-Designs mit der Zeit gew\u00f6hnt (solche gibt es wie Sand am Meer). Worauf sich die meisten Benutzer jedoch kaum gew\u00f6hnen werden ist die Navigation im Kopfbereich. Das st\u00e4ndige Scrollen ist auf Netbooks (die meist auch viel breiter als h\u00f6her sind aber oft die Scroll-Funktion des Touchpads wenig zufriedenstellend umsetzen) nicht selten eine Qual. Man kommt meist nur sehr umst\u00e4ndlich ans Ziel. Das ist \u00e4rgerlich wenn nicht gar unsinnig: man hat ja links und rechts Quatratzoll-weise Platz verschenkt!<\/p>\n

Eine L\u00f6sung des Problems w\u00e4re die Einbindung spezieller CSS-Dateien, die den Header-Navigationsbereich an die Seite schieben und per „fixed“ an einem bestimmten Ort des sichtbaren Bereichs fixieren. Nat\u00fcrlich muss man auch hier beachten, dass die Netbooks mit max. 1024 Pixel Breite nicht gerade viel Platz Links und Rechts bieten. Auch das „position: fixed“ wird nicht so gut unterst\u00fctzt. CSS erkennt nicht automatisch, welche der L\u00f6sungen die beste ist. Ohne JavaScript wird es sowieso kaum realisierbar sein. Ist jedoch JS im Browser aktiv, kann man auf andere L\u00f6sungen ausweichen – die PC-Software zeigt wie.<\/p>\n

Eine andere Schwachstelle f\u00e4llt auf, wenn eine Seite nicht nur Informieren (passive Wahrnehmung) will, sondern auch Interaktionen mit dem Benutzer erfordert. Einkaufswagen, Zwischenberechnungen oder Statusr\u00fcckmeldungen, die um mehr als 600 Pixel entfernt sind, werden auf breiten aber nicht allzu hohen Bildschirmen nicht mehr wahrgenommen. Das widerspricht der Erwartung eines wahrnehmbaren Feedbacks und f\u00fchrt nicht selten zum Frust beim Bediener. \u00c4hnlich ist es bei wechselnden Vorgaben, die f\u00fcr die Aktionen des Benutzers wichtig sind. Der Surfer wei\u00df nicht, dass sich die Vorgaben ge\u00e4ndert haben und eine andere Re-\/Aktion erwartet wird. Deshalb w\u00e4re es sehr von Vorteil, dass der Benutzer die Box mit Vorgaben frei auf dem Bildschirm platzieren kann. Nicht-modale Pseudo-Fenster (oder Forms\/Widgets in einem Fensterstapel der PC-Software seit Windows 3 sicherlich allen bekannt) bieten die M\u00f6glichkeit, Inhalte getrennt voneinander zu pr\u00e4sentieren: Vorgaben, Z\u00e4hler, Zwischensummen, Nachrichten k\u00f6nnen an jedem Ort der Internetseite abgelegt werden, wie es dem Surfer am geeignetsten erscheint. Funktioniert aber meist nur in Verbindung mit JS (welche ja auch f\u00fcr die dynamisch wechselnden Inhalte sorgt).<\/p>\n

Ein ganz eigenes Problem stellen die extrem kleinen Smartphone-Displays dar: Eine Breite von 320 Pixel ist nicht selten anzutreffen, die bei einigen Modellen zur H\u00f6he werden kann (durch das „Kippen“). Die Browser sind in den meisten F\u00e4llen jedoch so intelligent, dass Sie die Inhalte gut pr\u00e4parieren, indem sie diese Spaltenweise anzeigen. Dabei nimmt jede Spalte maximal die aktuelle Breite des Bildschirms ein. Dies sieht nicht immer gut aus, ist aber durchaus akzeptabel. Eine immer gr\u00f6\u00dfere Gruppe solcher Ger\u00e4te wird nicht mehr per Tastatur, Joystick oder Stift, sondern per Daumen bedient. Die sog. Touchscreens sind eine nicht zu untersch\u00e4tzende H\u00fcrde f\u00fcr eine exakte und effiziente Bedienung des Displays: der dicke Daumen (ausgerechnet Daumen!) ist die Ma\u00dfeinheit f\u00fcr alle Interaktionsfl\u00e4chen! Es z\u00e4hlt nicht nur die Interaktionsfl\u00e4che selbst, sondern auch der Abstand, den man zwischen diesen lassen muss, sonst gehen Klicks in die falschen Bahnen.<\/p>\n

Neben der Displaygr\u00f6\u00dfe und der Genauigkeit des „Zeigeger\u00e4tes“ haben die Smartphones einige weitere Schwachstellen: Die Bandbreite, die Gr\u00f6\u00dfe des verf\u00fcgbaren RAM-Speichers, die Prozessorgeschwindigkeit und meistens auch der flash-Mangel. Auch wenn flash demn\u00e4chst die Besitzer teurerer Android-Handys demn\u00e4chst erfreuen wird,\u00a0 sollte man ihnen – ebenso wie vielen anderen Smartphone-Nutzern – eine eigene Seite erstellen, die die wichtigsten Funktionen auf einfach strukturierten Fl\u00e4chen zusammengestellt wird. Alle Funktionen in elend langen Men\u00fcs unterzubringen bringt ebenso wenig, wie ausgekl\u00fcgelte JS-basierten Interaktionsm\u00f6glichkeiten, die nur im Schnecken-Tempo ausgef\u00fchrt werden. Das\u00a0 Deeplinking ist ausdr\u00fccklich zu bevorzugen: Anders als POSTs k\u00f6nnen GETs unter die Bookmarks aufgenommen werden. Eine Navigation, die sich in der URL widerspiegelt, erspart beim 2. und 3. Besuch das Scrollen auf der Seite, ist gut zu verlinken und begrenzt die Anzahl an Funktionen auf die, die man in diesem bestimmten Bereich erwartet.<\/p>\n

Das Webdesign ist im st\u00e4ndigen Umbruch, meist leider nur einer Mode folgend. W\u00fcnschenswert w\u00e4re ein Webdesign, das sich mehr an den Bed\u00fcrfnissen der Benutzer und ihren technischen M\u00f6glichkeiten orientiert. Der Bildschirm ist das erste und wichtigste Ger\u00e4t. Seine Gr\u00f6\u00dfen und Seitenverh\u00e4ltnisse schwanken immer mehr.\u00a0 Die Eingabeger\u00e4te sind seit den Touchscreens auch „nicht mehr das, was sie mal waren“: ihre Zeige-Genauigkeit ist nicht immer gleich. Summa summarum: Das Webdesignen wird zu einer wilden Angelegenheit.<\/p>\n

Weiterf\u00fchrende Links:
\nhttp:\/\/www.brighthub.com\/internet\/web-development\/articles\/52206.aspx<\/a>
\nhttp:\/\/www.brighthub.com\/internet\/web-development\/articles\/52204.aspx<\/a><\/p>\n

Ihre Seite mit anderen Augen (Aufl\u00f6sungen) gesehen<\/a> (nicht erschrecken bei Seiten ohne feste Breiten, da ist nat\u00fcrlich alles OK)
\n—————-
\n* Ich habe eine gute deutsche \u00c4quivalenz f\u00fcr „wildscreen“ gefunden: „Wildschirm“ :D<\/p>\n","protected":false},"excerpt":{"rendered":"

Es ist bereits seit Monaten kein Geheimnis: das Seitenverh\u00e4ltnis der Monitore von 16:9 setzt sich durch! Sie stellen zwar noch nicht die Mehrheit aber sie werden immer mehr: die sog. Widescreen-Bildschirme. Wollte ich nur \u00fcber diese schreiben, hie\u00dfe auch der Titel „widescreen usability“. Das Problemfeld ist jedoch deutlich gr\u00f6\u00dfer. Neben den immer g\u00f6\u00dfer werdenden Bildschirmen […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[8],"tags":[101,119,126,127],"class_list":["post-652","post","type-post","status-publish","format-standard","hentry","category-software","tag-software-co","tag-usability","tag-web","tag-web-20","entry"],"_links":{"self":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts\/652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/comments?post=652"}],"version-history":[{"count":0,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts\/652\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/media?parent=652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/categories?post=652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/tags?post=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}