Wireframe Example: Tasks App

The Tasks app presents two side-by-side lists. Selecting an item from the list on the left refreshes the right side's list of tasks.




Tapping the "New Task" icon, the keyboard slides up, and since the new task appears at the bottom of the task list, the list is shifted upwards so that the text field is in focus above the keyboard. In this case, typing a task name and then tapping return creates a new task, and the lift shifts upwards again so the new task appears above the keyboard.



In this edit mode, all the buttons along the bottom edge are replaced by an instruction and a Done button. Visible drag handles and delete buttons also appear on editable list items.