Reply screen design / element placement for tablet app

Question

This mobile tablet app displays full screen photos with a reply button. When the user (a senior over 65 years of age) clicks reply, a modal reply screen slides up from the bottom as shown below.

Question #1. Should the photo be represented on this reply screen and if so how large? Current design has a 25% scaled version of the photo which takes up a lot of screen real estate and adds clutter, but it's there because we're targeting seniors.

Question #2. For reply, I have a text input box and also the ability for the user to select from a list of canned responses. There will be no more than 10 generic ( i.e. non-AI) responses available. Currently they are in a scrolling vertical table view above the text input box to the right of the photo. Is the table view the optimal way to present the canned responses, or would a picker work better (ios) and should this be above or below the text input box?

Answer 1

The image is a bit large, but this may be a design guideline. I think there are more important structuring and design problems.

The most obvious:

Problem: There's no clear difference between the received message and the message to be sent. In fact the title Reply occupies the whole screen width and leads to confusion.

Solution: Make a clear difference between the container field of the received message and the sending message.

---

Problem: the fields with canned responses don't seem selectable items

Solution: make them look more like buttons or use a picker element instead

---

Problem: The background color of the canned responses is practically the same as that of the text input box, this makes them look the same type of component.

Solution: contrast more each type of element.

---

Problem: All interaction elements are grouped on the right of the screen, except Cancel.

Solution: Group all the interaction elements in the same activity area. If it's necessary to show that Cancel is apart from the rest of the elements, give greater visual presence to both: Cancel and Send.

---

(This is personal) The separation lines between the selectable elements have no function, generate noise and visually unify the group preventing the immediate interpretation of selectable units.

---

I think the example screen is a starting point, but not a final design. I would study the following points in general terms taking into account the type of end user:

1. Differentiate well the area of ​​the received message and the message to be sent
2. Contrast each element or group of elements according to their function
3. Highlight or differentiate, the final CTA buttons Cancel and Send from the rest of the components