it-swarm.com.de

Mac OS X Lion, Bildlaufleisten und Benutzerfreundlichkeit der Website

Ich habe eine Reihe von übergelaufenen Divs, die ich verwende, um viel Inhalt auf kleinem Raum anzuzeigen (wie lange Listen usw.). Den divs die CSS-Regel von overflow: auto; zu geben, hat immer wie ein Zauber gewirkt, und dem Benutzer Bildlaufleisten gegeben, um anzuzeigen, dass mehr Inhalt verfügbar war.

Dies wird unter Mac OS X Lion aus dem Fenster geworfen, da hier standardmäßig die Bildlaufleisten ausgeblendet werden, sofern Sie nicht aktiv blättern. Ich mag es, wenn ich mich mit einer Anwendung auf meinem Computer befasse, weil ich denke, dass es sehr starke visuelle Hinweise gibt, mit denen Sie können scrollen, um mehr Inhalt zu sehen. Bei Webseiten-Elementen ist das viel weniger klar und ich bin besorgt, dass meine Benutzer nicht wissen, dass mehr Inhalt verfügbar ist (Beispiel: Die "Fragen mit ähnlichen Titeln" von StackOverflow beim Eingeben einer neuen Frage sind ein gutes Beispiel dafür ).

Ist dies ein berechtigtes Anliegen, oder wissen Lion-Benutzer, dass wenn etwas abgeschnitten zu sein scheint, dies darauf hinweist, dass möglicherweise ein Bildlauf verfügbar ist? Gibt es irgendwelche Problemumgehungen, um beispielsweise Browser, die auf Lion ausgeführt werden, zu zwingen, Bildlaufleisten zu rendern, wenn es sich um ein Element auf der Seite handelt (und nicht um die Seite selbst)?

43
neezer

Ich bin damit nicht einverstanden. Ja, ich verstehe das UI/UX-Argument. Einige Websites, insbesondere der horizontale Ansatz für die Navigation, benötigen dies jedoch, da Benutzer möglicherweise nicht wissen, dass die Navigation horizontal verläuft. Ein Fix, um es zu erzwingen, wurde jedoch erwähnt. Ich habe festgestellt, dass dies gut funktioniert:

Öffne meinen Code in Mac Safari Chrome usw. (JS FIDDLE PREVIEW)

<style type="text/css">
#horiz_scroll::-webkit-scrollbar {
-webkit-appearance:none !important;
width:11px !important
}
#horiz_scroll::-webkit-scrollbar {
border-radius:8px !important;
border:2px solid white !important;
background-color:#ccc !important
}
#horiz_scroll::-webkit-scrollbar-thumb {
border-radius:8px !important;
border:2px solid white !important;
background-color:rgba(0,0,0,.5) !important
}
/*
// If you want it on hover //
#horiz_scroll::-webkit-scrollbar:active,
#horiz_scroll::-webkit-scrollbar:hover, 
#horiz_scroll::-webkit-scrollbar:focus{border-radius:8px !important;border:2px solid white !important;background-color:#ccc !important}
*/
</style>

<div id="horiz_scroll" style="width:943px;height:480px;overflow:auto"> 
  <!-- Just fit content inside this that scrolls horizontally. Example -->
  <table id="Table_01" height="350" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        <div style="background:#eee;width:9000px;min-height:400px">hello</div>
      </td>
    </tr>        
  </table>
</div>
12
TheBlackBenzKid

Gibt es Problemumgehungen, um beispielsweise Browser, die auf Lion ausgeführt werden, dazu zu zwingen, Bildlaufleisten zu rendern, wenn es sich um ein Element auf der Seite handelt?

Dies ist ein Angriff. Lassen Sie das System sich darum kümmern. Wenn der Benutzer Lion verwendet, liegt dies daran, dass er dies mag. Und wenn sie es verwenden und die neuen Bildlaufleisten nicht mögen, ändern sie dies einfach in den Systemeinstellungen.

8
sidyll

Ich habe mich NUR mit dem gleichen Thema befasst. Hier ist das Update, das ich gefunden habe. Dadurch wird die Bildlaufleiste bei Safari auf dem Mac Air und dem iPad, mit denen ich getestet habe, immer angezeigt. Dies ist natürlich nur dann der Fall, wenn mehr Inhalte zu sehen sind. Nicht, wenn der gesamte Inhalt angezeigt wird.

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

OS X Lion erzwingt das Problem wirklich nur. Benutzer von mobilen Browsern (sowohl iOS als auch Andriod) haben lange darüber nachgedacht ... der Überlauf-Trick funktioniert nicht im Allgemeinen; Sie müssen genauer über das Seitendesign nachdenken oder über das normale Browserverhalten hinausgehen und JavaScript-Unterstützung für Berühren und Scrollen (z. B. jqTouch) hinzufügen.

Leider wirkt sich das Verhalten der Bildlaufleiste von Lion nicht nur auf Websites aus. Zum Beispiel macht es meine VNC-Sitzungen auf Computern mit großen Anzeigeeinstellungen ziemlich nervig (muss die Größe des VNC-Fensters ändern, um Lion davon zu überzeugen, mir eine Bildlaufleiste zu zeigen).

Leider ist die Lösung, zu "Einstellungen> Allgemein> Bildlaufleisten anzeigen:" zu gehen und "immer" zu wählen. Macht die Vorwärtsbewegung, die Apple versucht hat, mit Lion aufzubauen, irgendwie rückgängig. Aber in der Lage zu sein, das verdammte Ding tatsächlich zu benutzen, ist eine universelle Trumpfkarte.

0
tardate

Lion kümmert sich selbst darum, indem es die Bildlaufleisten eines scrollbaren Elements für einen Moment blinkt, wenn es angezeigt wird, und dem Benutzer einen ersten Hinweis gibt, dass es mehr gibt, zu dem er scrollen kann. Natürlich kann der Benutzer dies bemerken oder nicht. Wenn der Benutzer an die Vorgehensweise von Lion gewöhnt ist, ist dies nicht der einzige Ort auf Ihrer Website, und der Benutzer weiß wahrscheinlich, wie er damit umgeht. Wenn Ihre Box ohne Bildlaufleisten look "unscrollable" ist, möchten Sie möglicherweise einen stärkeren Hinweis darauf geben, dass sie scrollbar sind, z. durch einen klaren Rand um die Box mit etwas abgeschnittenem Inhalt im Inneren. Möglicherweise möchten Sie dies unabhängig von Lion tun.

Wenn Sie Ihre Benutzeroberfläche verbessern können, um die Bildlauffähigkeit deutlicher zu machen, tun Sie dies auf beide Arten. Andernfalls würde ich mir keine Sorgen machen, wenn Ihre Inhalte in einer Weise dargestellt werden, die darauf hindeutet, dass es mehr gibt, wenn der Benutzer daran gewöhnt wäre, Bildlaufleisten auf einem System zu fehlen.

Sie können dies unter https://ux.stackexchange.com/ tun, um echte Expertenmeinungen zu erhalten.

0
deceze