Abstract—With millions of apps available to smartphone users, and the ability to potentially install hundreds or even thousands of apps on one’s mobile device, new interfaces and voice control integrations are helping to make accessing these apps easier. However, it is still a necessary task to visually organize one’s apps for easier future access.  On Apple iPhones, the “Edit Home Screen” function allows users to visually arrange and organize installed applications on their home screen.  This study analyzes the “Edit Home Screen” interface, the contexts in which users of a wide variety of backgrounds interact with it, and explores possible alternative designs that could improve its usability.  

1 QUALITATIVE EVALUATION

In this qualitative evaluation of the card prototype, there were four one-on-one interviews with post-event protocols.  The interview process was smooth for each participant, and questions were asked in a consistent manner. However, interviewees’ level of satisfaction was not obtained for every task.  Also, a small change was made to one of the cards between interviews 1 and 2, in which the ‘Select’ and ‘…’ buttons were made darker with a pen (see figure 4.2.2) to compensate for dim room lighting, and another card was added between interviews 2 and 3 (see figure 4.2.6).  The new card was added to clarify how the ‘Move to page’ function would work, and reflects the current page selection interface found in iOS 15 and up.  

Video recording was instrumental for capturing the fine details of users’ actions and thought processes while attempting to complete the app rearrangement tasks (see Appendix 4.1: Qualitative Evaluation Content From M4 Assignment).  The following raw results are notes taken during post-interview review of video footage.

1.1 Raw Results

Table 1—List of interviewees and iOS home screen related data

All four participants were able to successfully enable the ‘Edit Home Screen’ interface for task 1 (figure 4.2.1). Participant 2 made one slip while doing so. 

For task 2, all participants were able to swap the position of app ‘A’ with that of app ‘B’ without any errors.  Both participants 1 and 2 found the swapping behavior to be unexpected, with participant 1 calling it “odd.” Participants 3 and 4 preferred it, with participant 3 calling it “intuitive” (figure 4.2.2)

For task 3, it was initially intended to ask users to tap the new ‘undo’ button after completing task 2.  Instead, users were asked to undo the previous action required by task 2, and the new ‘undo’ button was never mentioned. This was done to test the overall discoverability of the button.  In the study, none of the interviewees tapped the ‘undo’ button. All participants dragged the apps to their original places using the new swapping behavior instead.

All users successfully accomplished tasks 4 – 8.  When creating a new folder after holding down an app in ‘Edit Home Screen’ mode for task 4 (figure 4.2.3), each participant felt that the ‘Create Folder’ and ‘Remove App’ options in the resulting submenu properly described what would happen if selected.  However, only participant 2 felt the ‘Move to page’ option did the same.

Task 5 required users to tap the ‘Select’ button, select multiple apps, and then move the selected apps to another area of the page, whereas task 6 had them tap and hold the selected apps to reveal a submenu similar to the one in task 4 (see figure 4.2.4).  All participants tapped each app one at a time to select them, while participant 2 used three fingers to select multiple simultaneously.  Participant 2 suggested adding a remove button at the top of the ‘Select’ multiple app screen.

Figure 2—Screenshots from recorded interview video footage.  Left: participant 2 creates a folder after selecting multiple apps.  Right: participant 3 swapping the positions of two apps.

None of the participants made errors while completing task 7, which was to simply exit from the ‘Select’ multiple apps interface, or task 8, which was to tap on the ‘…’ button.  Participants were asked what they expected to find after tapping ‘…’ and what their thoughts were on the resulting submenu and the functions therein (figure 4.2.5).  None of the participants knew what to expect when the button was pressed, but felt that they would know once they pressed it.  Participant 1 was most interested in the ‘Sort by color’ function, and stated “I don’t know anyone who organizes apps by their name.” He also felt the ‘Sort by usage’ option was “vague.” Participant 2 was the exact opposite: he didn’t find the ‘Sort by color’ to be useful, whereas sorting by usage was.  He also suggested that there be another option to sort apps by when they were last opened.  Participant 3 also felt the ‘Sort by usage’ option was the most useful, and interpreted it as “time used on average per day.”  He also suggested including an option for sorting apps by when they were typically used throughout the day.  For instance, sorting by daytime to nighttime would have apps typically used in the morning at the top of the page, and those used at night towards the bottom. Participant 4 felt none of the functions were particularly useful, but recommended an option for sorting apps by topic or category.

When asked if any of the tasks completed were particularly satisfying or unsatisfying, participant 1 found them all to be satisfying, but commented on the underlying organizational structure of the ‘Edit home screen’ interface as a whole, finding it “frustrating” compared to Android, where more flexibility is given, and empty spaces are allowed between app icons.  Participant 2 found all tasks to be satisfying, and reiterated the ability to have a button on the ‘Select’ multiple apps interface for removing the selected apps.  Participant 3 felt all submenus including ‘…’ and the functions ‘Move to page’ and ‘Create folder’ were the most satisfying. He also commented that providing people “structure” through various sorting functions would make app organization less “paralyzing” for users, and that he interpreted the ‘undo’ button as a ‘back’ or ‘cancel’ button.  Participant 4 found the swapping behavior of the apps to be the most satisfying, and restated that the ‘Move to page’ function was unclear, and that a ‘Sort by category’ function should be included in the ‘…’ menu.

1.2 Analysis

Based on interviewee responses overall, the swapping behavior when rearranging app icons shows promise.  However, it would be a massive change to the current rearrangement behavior in ‘Edit Home Screen’ mode, which has remained unchanged since iOS was first introduced.  Also, the interface I provided for selecting multiple apps, which is based on the Apple Photos app, shows potential in that it was intuitive enough for users to use without making errors.  These takeaways were expected.  Further needfinding could be done to see if function buttons, and which ones, should be added to the interface once multiple apps are selected.  The most surprising takeaway was that none of the users utilized the added ‘undo’ button.  Participant 3 was the only one to mention why, stating that he thought it was a “back” or “cancel” button.  It is unclear if this perception was shared among all participants.  Lastly, the ‘…’ menu requires much further needfinding.  The interviews suggest that sorting functions to be included in this menu could be as varied as the iPhone users themselves.  Therefore, utilizing constraints and including only the most popular sorting functions might be necessary.  

1.3 Changes

The first change would be to move the position of the undo button, label it with the word ‘undo’ instead of an arrow, and/or move its position on the screen, or remove it completely.  Another would be to add more sorting functions like ‘Sort by last opened,’ and ‘Sort by category’ to the ‘…’ menu.  I might also add an option to this menu that allows the user to choose between the current rearrangement behavior and the swapping behavior.

2 PREDICTIVE EVALUATION

The predictive evaluation of my ‘Edit Home Screen’ verbal prototype is a cognitive walkthrough.  The tasks addressed are subtasks of the overall task, which is reorganizing the iPhone home screen, and they are: 1) dragging an app to a different page, 2) undoing a previous reorganization action, 3) selecting multiple apps, 4) moving multiple selected apps within a page, and 5) moving multiple selected apps into a folder.

If I am the user, and I am tasked with dragging an app to a different page when ‘Edit Home Screen’ is enabled, I would first see the grid of apps shaking.  The shaking of the apps would imply that the apps are loose, and are able to be moved.  I would then think I could use my finger to tap and drag one of the app icons around on the page.  Upon tapping my finger on one of the apps, I see that the app icon grows slightly bigger in scale and it continues to shake.  My evaluation of this is that I have selected it somehow, and that it is still able to be moved.  I start to drag my finger around on the screen a bit and notice that the app icon follows where my finger is touching the screen.  A sense of direct manipulation is achieved.  At this point, it is not clear how to move an app to another page as there is no indication of where to move the app to do this.  I might try to drag the app over to one side of the screen as I interpret a page turn as something similar to turning the pages of a physical book.  This would also be informed by cultural norms with regards to how pages are turned, and the direction text is read.  When I drag the app to the right side of the screen, I notice that a solid blue line appears.  The blue line gradually becomes brighter and brighter. As I hold the app in this position, I might become startled at the sight of this blue line and move the app away from the edge of the screen.  The blue line would disappear in this case. The blue color does not imply a dangerous action as red, orange, or yellow might.  Upon dragging the app to the edge of the screen, I see that the blue line appears again and begins to get gradually brighter.  This time I wait, and notice that the blue line eventually blinks briefly and the page turns.  When the page turns, I see that there are many empty spots available in the grid, however, because my finger is still on the edge of the screen, I notice there is still a blue line that gradually becomes brighter, so I move my finger away from the edge.  With the app still under my control, I let go of the screen, and the app settles within the new page.

When asked to undo a previous reorganization action for task 2, I might be confronted with a choice, but only if the previous action was difficult or frustrating.  If it wasn’t, I would simply tap and drag the same app, and move it back to its original position.  Otherwise, I might take a moment to look at the interface, and notice the buttons at the top of the screen, one of which is labeled ‘undo.’  I tap it, and the previous action is undone immediately.

For task 3, I see that the apps are shaking, but I’m not sure how to select multiple apps.  I may try tapping and holding down on an app to see if it becomes selected, or I might try tapping on multiple icons simultaneously.  Neither of those would work. Alternatively, I could tap and hold one app, and then while holding down, tap others.  The interface shows all the apps I selected, aside from the one held down, moving under my held down finger.  This tells me my held down finger will be able to move multiple apps together.   None of these options seem particularly obvious.  Another possibility is that I might look around and notice a button with a dotted box icon on it at the top of the interface.  I tap this, because the mapping reminds me of a selection bounding box seen in other programs like MS Paint or Adobe Photoshop.  I then see the words “Tap and drag to select,” at the top of the screen, and there is also a “Cancel” button displayed on the top right.  I tap and drag, and notice that I am controlling the dimensions of a translucent box with a solid, thin white outline, and all icons within the box have a blue outline around them.  

When I have selected the desired apps and try to move them for task 4, I tap on an icon and start to drag.  All of the unselected apps move out of the way of the apps I selected which are moving while maintaining their original formation.

For task 5, there is no label or indicator that communicates to me that making a folder containing multiple selected apps is possible.  However, because I’ve used other Apple iOS software such as Notes that lets me edit a selection by tapping on it again, I tap on one of the selected apps.  I then see a small menu bubble pop up whose design is consistent with the Notes app and shows the following options: ‘Create folder,’ ‘Page,’ and ‘Remove.’ I tap ‘Create folder’ because it is most related to my goal.  The iPhone then displays a folder with its contents being all of the apps that were selected.  The apps in this folder are still shaking, implying that ‘Edit Home Screen’ mode is still enabled.

3 EVALUATION SUMMARY

In the next iteration through the design life cycle, I would do more needfinding to better understand the specific elements of my prototypes, as each one is functionally rich, and broad in scope.  Much more quantitative, and qualitative user data would be helpful to figure out which individual ideas for functions and features would help users the most, and which ones could be scrapped.

Specifically, I would like to understand if the majority of users would want the ‘Edit Home Screen’ interface to be more similar to the Mac desktop, in which app positions are still grid-based, but space is allowed between apps, and they can be placed anywhere in the grid. I also want to know how most users feel about the inclusion of an undo button, app sorting functions, and whether or not I have explored all of the best possible ways to select multiple apps.  Finally, is app swapping behavior found in the card-based prototype too big of a change to the current ‘Edit Home Screen’ interface?  What would the pros and cons be for such a drastic change?

Surprisingly, this experience of prototype evaluation has not brought to mind any design alternatives that are completely removed from the ones that currently exist.  However, it has inspired the possibility of hybrid prototypes which combine different elements of each prototype in different ways.  For example, combining the page turning blue line in the verbal prototype could very well be incorporated into the version that the card prototype represents.  Overall, all prototypes will need to have specific aspects evaluated piece-by-piece.

As previously mentioned, the undo button would need to be revised for the card-based prototype.  It needs to be labeled with the word ‘undo’ or its position and logo must be changed so as not to come across as a ‘back’ or ‘cancel’ button.  More sorting functions like ‘Sort by last opened,’ and ‘Sort by category’ will need to be added to the ‘…’ menu.  However, it is up to future needfinding studies to decide if these functions are truly necessary, and won’t overcomplicate the card prototype. Overall, evaluations were generally positive, however, the fidelity for future revisions of all prototypes would likely remain low.  This is especially true for the Wizard of Oz prototype mentioned in my M3 assignment, which has undergone no evaluation at all.

Having mentioned the above revisions, I would still gather more feedback based on qualitative or predictive evaluation, before anything empirical.  There are too many unknowns in terms of which revisions users would prefer at this time.  I also think that qualitative evaluation would be helpful for most, if not all of the prototype revisions.

4 APPENDICES

4.1 Qualitative Evaluation Content from Part 4

For the post-event protocols, users will be asked to complete several different app organization tasks within the ‘Edit Home Screen’ interface that are mutually exclusive from one another, but ultimately change the overall task of organizing the iPhone home screen.  These are:

1. Entering into ‘Edit Home Screen’ mode by tapping and holding down on an app icon (see figure 4.2.1)
2. Dragging app ‘A’ to swap its position with app ‘B’  (see figure 4.2.2)
3. Tapping the undo button after making the previous change (figure 4.2.2)
4. Tapping and holding an app icon while ‘Edit Home Screen’ mode is enabled, and creating a new folder (see figure 4.2.3)
5. Tapping the ‘Select’ button, selecting 4 apps, and moving the 4 apps to another location within the page (figure 4.2.4)
6. Tapping the ‘Select’ button, selecting 4 apps, and then tapping and holding those same apps to reveal a submenu (figure 4.2.4)
7. Exiting from the 4 apps submenu, and canceling the selection of multiple apps (figure 4.2.4)
8. Tapping the ‘…’ button to reveal a submenu with various app organization functions (figure 4.2.5 left)

As each participant completes the above tasks, they may need to verbalize their actions in real-time due to the nature of the prototype, and I will occasionally provide verbal feedback when new cards are shown based on the participant’s actions.  I will purposely refrain from doing too much explaining.

The data that will be gathered are the participants’ likes and dislikes once they complete each of the above tasks.  I will also ask them what they were thinking as they completed each task, or what was their goal when making specific actions.  At the very end of the tasks, I will also ask for their level of satisfaction for each of the changes and added features, which include swapping app positions, the ‘Undo’ feature, selection of multiple apps, and the ‘…’ submenu.  I will also ask what they expect should be in the ‘…’ submenu.

4.2 Updated Card Prototype

Figure 4.2.1—Card showing how to enter into ‘Edit Home Screen’ mode after tapping and holding down on an app icon.

Figure 4.2.2—The  cards that describe how apps could be arranged via swapping positions were updated between interviews 1 and 2 so that the ‘Select’ and ‘…’ buttons are darker and more visible.

Figure 4.2.3—Card showing how apps can be tapped and held down again while “Edit Home Screen” mode is enabled.  This reveals functionality specifically for organizing an app more efficiently.

Figure 4.2.4—Three cards that describe what happens when the user taps the “Select” button while “Edit Home Screen” mode is enabled.  

Figure 4.2.5—Card showing a submenu that appears when the “…” button is pressed while in “Edit Home Screen” mode.  Possible options are subject to change, but may allow the user to change how rearrangement behavior works, or to access auto-organizing functionality.

Figure 4.2.6—Card added between interviews 2 and 3.  It allows a user to select a page to which selected apps will be moved.  This interface is also displayed when a user taps the page indicators above the bottom row of app icons, while ‘Edit Home Screen’ mode is enabled.

4.3 Verbal Prototype With Physical Item

For this prototype, I will verbally describe to users the interface and what happens when certain actions are done while “Edit Home Screen” mode is enabled.  In this mode, there will be an “Undo” button at the top left of the screen – this is the same as the card prototype, however the rest of the functions will be different.  Next to this button at the top-center of the screen is the original button with a “+” symbol which allows the user to add a widget.  To the right of this button are two buttons.  The first of the two is labeled with what looks like a dotted box, and the second says “…”

When an app is dragged and is touching either the left or right edges of the page on the home screen, a solid blue line about 1/16” thick will show and gradually become brighter and brighter.  Then, the line will blink briefly signaling that the page is about to turn.  In this prototype, apps can be placed anywhere within the 4 x 6 grid.  Now you can have apps in separate corners of a home screen page for example.  When an app is dragged and overlaps another, the other apps will slide over as they typically do in the current home screen editing interface.  However, because empty spots are allowed, the apps will slide over to fill in any extra spaces further down the order of the list. 

The button with the dotted box symbol is a bounding box tool.  This allows the user to tap and drag a box around several apps within the home screen.  Once pressed, the top of the screen will say “Tap and drag to select,” and there will also be a “Cancel” button on the top right.  When the user begins doing this, the top of the screen will monitor how many apps are within the user’s bounding box selection.  When the user makes their selection and releases their finger, they will then be able to drag the selected apps into folders, other areas of the page, or other pages.  They can also hit “Cancel” or tap anywhere else outside of the selected apps to deselect them.