Ich möchte meine Website für Personen zugänglich machen, die über iPad oder andere iOS Geräte verfügen.
Welche Überlegungen muss ich berücksichtigen, wenn ich eine Benutzeroberfläche entwerfe, die mit dem iPad oder iOS im Allgemeinen kompatibel ist?
Check out Jakon Nielsens Gedanken zu diesem Thema . Das Video unten verlinkt ist nur 3 Minuten lang und interessant, wenn nicht direkt nützlich.
Allgemeine Gedanken (keine Fakten, die dies belegen, außer persönlicher Erfahrung):
Viel Glück!
Dies gilt eher für Ihre allgemeine UI-Frage:
Denken Sie "berühren, nicht klicken". Wie würden Sie (oder Ihre potenziellen Kunden) die App mit ihren Händen verwenden? Es gibt einen grundlegenden Unterschied zwischen dem Zeigen mit der Maus auf etwas und dem Zeigen mit der Hand auf etwas. Nehmen Sie vielleicht die wichtigsten Kontrollen an der Seite vor, damit die Leute sie leicht erreichen können? Experimentieren Sie mit verschiedenen Drahtrahmen und bitten Sie die Benutzer, die Benutzerfreundlichkeit zu beurteilen. Benutzertests zu Beginn des Prozesses können erheblich zur Verfeinerung Ihres Designs beitragen.
Ich habe ein Blog über Dinge geschrieben, auf die man achten muss, wenn man Websites entwirft, die für das iPad optimiert/bereit sind. Sie können es nützlich finden.
Das iPad wurde entwickelt, um im Internet zu surfen. Der große Bildschirm ermöglicht die Anzeige der gesamten Webseitenbreite. Das Design für die Webseite sollte also auf einem iPad in Ordnung sein.
Für das iPhone, den iPod Touch, können Sie ein anderes Design erstellen und eine Benutzeroberfläche erstellen, die nativen iPhone-Apps ähnelt. Es gibt Tools, die Sie verwenden können, um dies zu ermöglichen, aber es wird eine Menge Arbeit sein. Check out Sencha Touch , das auch für iPads verwendet werden kann.
Wenn Sie so etwas wie Sencha Touch nicht verwenden möchten, müssen Sie auch berücksichtigen, dass die Benutzerinteraktion mit diesen Geräten ganz anders ist. Sie basieren auf Berührungen und nicht auf Mäusen. Ein Beispiel ist, dass Hover-Effekte mit einem berührungsbasierten Gerät nicht funktionieren. Auch Mausklicks unterscheiden sich von der Untätigkeit, die der Browser unter iOS erfasst. Dies bedeutet, dass Sie die Benutzerinteraktion verbessern können, indem Sie das für iOS verwendete JavaScript anpassen, um es nativer und intuitiver zu gestalten.
Apple hat außerdem ein Human Interface Guide für seine nativen Apps unter iOS erstellt. Es wäre eine gute Idee, dies durchzusehen, da dies das ist, was die Benutzer von nativen Apps erwarten. Wenn Sie entsprechende Webseiten haben, können Sie Ihre Website besser verstehen.
Vergessen Sie nicht die Bildschirmgröße und die verschiedenen möglichen Layouts: iPad CSS Layout mit Quer-/Hochformat
Zwei weitere Probleme, die ich hinzufügen wollte, insbesondere in Bezug auf die Anpassung einer vorhandenen Site oder Anwendung, anstatt eine neue zu entwerfen - diese mögen trivial erscheinen, aber dennoch:
Elemente müssen größer sein als bei einer Desktop-App, da der Finger weniger präzise ist als die Maus.
Nachdem ich in letzter Zeit einige Grafik-Apps verwendet habe, habe ich festgestellt, dass es sehr schwierig sein kann, Objekte mit den Fingern genau zu platzieren, da sie das Objekt, das Sie bewegen, verdecken. Eine Möglichkeit, dies zu beheben, wie es scheint Apple hat es getan), besteht darin, die Bewegung erst zu beginnen, nachdem Sie den Finger etwas bewegt haben, sodass er sich nicht mehr über dem Objekt befindet, das Sie bewegen.
Mehrfachauswahl ist im Moment sehr mühsam. Ich mag den Apple Ansatz, ein Objekt mit einem Finger zu tippen und mehrere Objekte mit dem anderen zu tippen, um eine Mehrfachauswahl zu erstellen. Er fällt auseinander, sobald Sie mehr als 4-5 Objekte benötigen. Die Auswahl ziehen funktioniert möglicherweise besser. Zählen Sie beispielsweise zuerst ein Auswahlwerkzeug und ziehen Sie dann mehrere Objekte per Drag & Drop.