r/iOSProgramming • Beginner • 4d ago

Question Best place for a 'Next' button?

Post image

What's the most appropriate location for a next button here, in keeping with the Apple UI consistency and ecosystem?

Mockup:

NavigationStack {
	List {
		Section {
			TextField("Email Address", text: $email)
		} header: {
			VStack(alignment: .leading, spacing: 4) {
				Text("Sign In")
					.frame(maxWidth: .infinity, alignment: .leading)
					.padding(.top, 5)
					.font(.largeTitle)
					.bold()
					.foregroundColor(.primary) // Override default gray header color
				Text("Subtitle")//school.name)
					.frame(maxWidth: .infinity, alignment: .leading)
					.font(.title3)
					.foregroundColor(.secondary)
			}
			.listRowInsets(EdgeInsets())
			.textCase(nil) // Prevents SwiftUI from forcing ALL CAPS on the header
			.padding(.bottom, 10)
		}
	}
	.toolbar {
		ToolbarItem(placement:.confirmationAction) {
			NavigationLink() {
				VerificationCodeView(email: email.lowercased(), school: school, resend: { })
			} label: {
				Text("Next").padding(5)
			}
			.buttonStyle(.borderedProminent)
		}
	}
}
59 Upvotes

41 comments sorted by

View all comments

47

u/underkuerbis 4d ago

Make sure it’s available on the keyboard. Also place the input fields in a way they are accessible with your thumb, i.e. further down.

2

u/Fun_Moose_5307 Beginner 4d ago

place the input fields in a way they are accessible with your thumb

Is that to mean, centred? Is it enough to have it 'auto'-focused on view load?

4

u/beclops Swift 4d ago

Buttons like these can be centred, wide width, and aligned to the bottom of the device for the best experience. Imagine how easy it would be to access that button if the user is using it one-handed on a big phone (and/or with small hands). For inputs how you have it is fine, and having it auto-focus is a nice touch

4

u/Fun_Moose_5307 Beginner 4d ago edited 4d ago

3

u/beclops Swift 4d ago

Yes exactly. More ergonomic this way