Entwerfen für das iPad
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):
- Wenn Sie auf ein Design für eine andere Plattform zurückgreifen müssen, greifen Sie auf PC-Designs zurück, NICHT auf iPod-Designs. Wenn Sie (bald) ein iPad in die Hände bekommen können, durchsuchen Sie das Standard-Amazon.com auf dem iPad. Es wird auf die Standard-Benutzeroberfläche des iPod Touch/iPhone zurückgegriffen, die über horizontale Füllschaltflächen mit Text ganz rechts verfügt und im Grunde unbrauchbar ist.
- Es ist einfacher, kleine Dinge zu sehen, als sie anzuklicken. Nach meiner eigenen Erfahrung ist der meiste lesbare Text nicht anklickbar, und ich muss häufig auf Links (z. B. auf Wikipedia) zoomen.
- Testen Sie Ihre Designs sowohl im Hoch- als auch im Querformat!
- Das Bewegen der Hände erfordert etwas mehr körperliche Energie (und ist weniger präzise) als das Bewegen der Maus.
- Die Verwendung mehrerer Registerkarten ist schwieriger als mit dem PC (obwohl wahrscheinlich einfacher als mit dem iPhone). Links, die den Benutzer von der Website entfernen, werden wahrscheinlich genau das tun. Erwarten Sie sie nicht bald zurück.
- Versehentliches Klopfen ist häufiger als versehentliches Klicken.
- Das Tippen (auch für die Suche) ist schwieriger als mit einer Tastatur.
- Eingebettete YouTube-Videos funktionieren.
- Denken Sie an die Benutzerbasis, die iPads kauft und für sie entwirft.
- Update: Es gibt andere Webbrowser. 95% der Benutzer verwenden wahrscheinlich Mobile Safari, aber es könnte sich lohnen, einige andere zu testen. Zum Beispiel habe ich gerade festgestellt, dass Stack Exchange-Sites in Atomic Web Browser nicht funktionieren (keine Fragen stellen können).
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:
- Stellen Sie sicher, dass Ihre Site oder Anwendung nicht mit der Maus über Aktionen antwortet (z. B. QuickInfos).
- Denken Sie daran, dass es keinen Rechtsklick gibt (im Web weniger verbreitet, aber manchmal in Web-Apps zu finden).
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.